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?

put `console.log(event.target.value)` inside handleChange function and check the value, it should work. — Mayank Shukla, Aug 09 '17 at 10:37

score 6 · Accepted Answer · answered Aug 09 '17 at 12:22

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.

answered Aug 09 '17 at 12:22

Helge S

561
4
4

Thanks. I figured it out 10 minutes ago I was in the process of answering but you were faster so I'll accept it. – Krisztián Nagy Aug 09 '17 at 12:26
Wow, this took me forever to find out. Their documentation needs to be clearer... – sir_thursday Aug 25 '17 at 21:07

score 1 · Answer 2 · answered Aug 09 '17 at 10:39

1

According to this example:

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

answered Aug 09 '17 at 10:39

An Nguyen

1,487
10
21

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: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx but unfortunately for TextField I found no solution. – Krisztián Nagy Aug 09 '17 at 10:53
Have you bound your `handleChange` into your component ? – An Nguyen Aug 09 '17 at 11:03
Yes I have. ( in the constructor after initializing state `this.handleChange = this.handleChange.bind(this)`) – Krisztián Nagy Aug 09 '17 at 11:06

score 1 · Answer 3 · answered Jun 22 '19 at 14:42

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

How to create a controlled Fabric UI TextField component?

3 Answers3