4

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

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

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

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

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

4

3 回答 3

6

从docs来看，onChange它不是一个属性。改为使用onChanged。请注意，返回值是文本字段的值，而不是事件。

于 2017-08-09T12:22:58.143 回答
1

根据这个例子：

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

于 2017-08-09T10:39:21.187 回答
1

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

首先你必须在你的类之外声明一个接口

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

于 2019-06-22T14:42:56.997 回答