ReactJs input element content does not change

Question

Refer to the code below, no matter what I type in the input element, its value doesn't change.
Seems the input element become readonly. However, the onChange event do fire and the console log output always display the initial value. Is there anything wrong with my code?

Combo.tsx

import * as React from "react";

export interface ComboProps { label:string, value:string }

// 'HelloProps' describes the shape of props.
// State is never set so we use the 'undefined' type.
export class Combo extends React.Component<ComboProps, ComboProps> {
    constructor(props:any){
        super(props);
        this.state = {label:this.props.label, value: this.props.value};
        this.update = this.update.bind(this);
    }
    update(event:any){
        console.log(this.state.value);
    }
    render() {
        return <div className="wo-boundary">
            <div  className="wo-label" ref="label">{this.state.label}</div>
            <div  className="wo-widget wo-input-module wo-combo">
                <input ref="box" type="text" onChange={this.update} value={this.state.value} />
                <div ref="toggle"  className="toggle">
                    <svg  className="icon-dropdown-toggle">
                        <use href="svg-symbols.svg#icon-dropdown-toggle"></use>
                    </svg>
                </div>
            </div>
        </div>;
    }
}

I the "any" type annotation really bringing anything?

JulienD
– JulienD

2016-12-11 13:47:33 +00:00
Commented Dec 11, 2016 at 13:47 — JulienD
– JulienD, Commented Dec 11, 2016 at 13:47

JulienD · Accepted Answer · 2016-12-11 13:40:44Z

1

You need to update the state in the update callback:

update(event){
    this.setState({value: event.target.value});
}

answered Dec 11, 2016 at 13:40

JulienD

7,32310 gold badges57 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJs input element content does not change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related