如何創建受控的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