How to create a controlled Fabric UI TextField component?

Question

I've been trying to code a controlled TextField component in the standard way just like in React docs:

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

<TextField label='Enter Text' value={this.state.text} onChange={this.handleChange}/>

The code above is what I've been using, but it seems that it doesn't change the state of the react component, because in the same form if I change a controlled checkbox, it resets the textfield to be empty. If I use a standard html input element it works just as expected and doesn't clear the field.

What am I doing wrong here? Shouldn't TextField work the same way as a text type input?

Answer 1

From the docs, onChange is not a property. Use onChanged instead. Note that the return value is the textfield's value, not an event.