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

Question

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

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

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

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

我在这里做错了什么？ TextField 不应该像文本输入一样工作吗？

Answer 1

据此example:

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

Answer 2

从docs开始，onChange不是属性。请改用 onChanged。请注意，return 值是文本字段的值，而不是事件。

Answer 3

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

首先，您必须在 class

之外声明一个接口

interface myState {
  value1: string;
}

您必须在 class 中包含您的界面。

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

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

How to create a controlled Fabric UI TextField component?

typescript

reactjs

office-ui-fabric