如何创建受控的Fabric UI TextField组件？

Question

我一直在尝试以标准方式编写受控TextField组件，就像在React docs中一样：

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

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

上面的代码是我一直在使用的，但它似乎并没有改变react组件的状态，因为如果我更改一个受控复选框，它会以相同的形式重置，它会将textfield重置为空。 如果我使用标准的html输入元素，它的工作方式与预期的一样，并且不会清除该字段。

我在这做错了什么？ TextField的工作方式与文本类型输入的工作方式不一样吗？

Answer 1

从文档中 ， onChange不是属性。 请改用onChanged 。 请注意，返回值是文本字段的值，而不是事件。

Answer 2

根据这个例子 ：

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

Answer 3

我不知道你想做什么但是...如果您需要将输入值传递给文本标签，您可以这样做：

首先，您必须在类之外声明一个接口

interface myState {
  value1: string;
}

你必须在课堂上包含你的界面。

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

我想对于TypeScript主题，您必须公开声明您正在使用的接口。

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

您必须在渲染中声明一个函数来分配状态的值

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

通过这种方式，您可以分配输入的值。 但要更新它，你必须创建一个函数并在onChange上调用它

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

将输入值分配给使用setState声明的状态。 必须做一个功能。

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

您可以在此处查看示例https://codepen.io/jasp402/pen/EBWBgO