Question

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

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

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

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

我在这里做错了什么？ TextField的工作方式与文本类型输入相同吗？

Answer 1

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

Answer 2

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

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

interface myState {
  value1: string;
}

您必须在类中包括您的Interface。

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组件？

2 个答案: