4

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?

4
  • put console.log(event.target.value) inside handleChange function and check the value, it should work. Aug 9, 2017 at 10:37
  • Tried that and for some reason it doesn't work. Aug 9, 2017 at 10:44
  • what the value it is printing? Aug 9, 2017 at 10:54
  • Doesn't print anything :( Aug 9, 2017 at 10:55

3 Answers 3

6

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

2
  • Thanks. I figured it out 10 minutes ago I was in the process of answering but you were faster so I'll accept it. Aug 9, 2017 at 12:26
  • Wow, this took me forever to find out. Their documentation needs to be clearer... Aug 25, 2017 at 21:07
1

According to this example:

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

3
  • Doesn't work. Also I don't see an example in there for a controlled TextField, I've looked at this before asking the question. I've had a similar problem trying to implement a Checkbox but for that Microsoft provides a proper example: github.com/OfficeDev/office-ui-fabric-react/blob/master/… but unfortunately for TextField I found no solution. Aug 9, 2017 at 10:53
  • Have you bound your handleChange into your component ?
    – An Nguyen
    Aug 9, 2017 at 11:03
  • Yes I have. ( in the constructor after initializing state this.handleChange = this.handleChange.bind(this)) Aug 9, 2017 at 11:06
1

I do not know what you want to do but ... If what you need is to pass the input value to a text label, you can do it this way:

First you must declare an interface outside of your class

interface myState {
  value1: string;
}

you must include your Interface in the class.

class TextFieldControlledExample extends React.Component<{}, myState> {...}

I suppose that for TypeScript themes you must publicly declare the interface of which you are using.

public state: myState = { value1: ''};

you must declare a function within the render to assign the value of the state

public render() {
    const { value1 } = this.state;

in this way you assign the value of your inputs. but to update it you have to create a function and call it on the onChange

<TextField
  label="Enter Text"
  value={this.state.value1}
  onChange={this._onChange}
  styles={{ fieldGroup: { width: 300 } }}
/>
<Text  variant='xxLarge' nowrap block>
  {value1}
</Text>

to assign the input value to the state you have declared using setState. must do a function.

  private _onChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    this.setState({ value1: newValue || '' });
  };

You can see the example working here https://codepen.io/jasp402/pen/EBWBgO

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.