javascript - 如何让 Material-UI 的 像 ReactJS 中的 <input/> 一样使用 ref ='' 正确返回？

Question

使用以下方法:

  handleClick(event) {
    const inputText = this.refs.inputText
    console.log(inputText.value.trim())
  }

我正在尝试获取 Material-UI 的 <TextField/>使用 ref 正确返回输入文本，如 <input/>可以用<button/>触发它:

  <input
    className='form-control'
    placeholder='Input Text'
    ref='inputText'
    type='text'
  />

  <button
    onClick={(event) => this.handleClick(event)}
  >

然后我尝试使用 <TextField/> 进行以下操作, 但它返回为 undefined .我怎样才能让它像 <input/> 一样正确地返回输入的文本？多于？

  <TextField
    hint='Enter text'
    className='form-control'
    ref='inputText'
    type='text'
  />

Answer 1

我会建议这种方法:

使用挂接到 redux 本身的 value 和 onChange 函数设置您的文本字段，其中 onChange 函数仅更新 值(value)。

所以你会有这样的东西:

   <TextField
       value={this.props.textFieldValue}
       onChange={this.props.textFieldChange}

textFieldChange 是一个简单更新 textFieldValue 的 Action 。 redux 中的大多数表单都会像这样工作。请记住我为这些 Prop 和 Action 起的名字只是为了举例。如果您有一个大表单，您可能需要考虑将状态树的一部分专用于您拥有的表单本身:

state: {
    form: {
       textField:   ...your textfield value here,
       name:  ...,
       whateverElse: ...
   }
 };

我喜欢用 redux 来做这件事，因为我可以让架构师成为状态的一部分，看起来就像我将它发送到的任何地方的 json 有效负载，这样我就可以把表单发送到我想发送的地方。

无论如何，回到这个例子。当您现在单击您的 handleClick 时。您需要做的就是获取值:

handleClick(event) {
   console.log(this.props.textFieldValue.trim());
}

因为文本字段随着每次更改而更新，所以您始终可以在您的状态下访问它。这也为您提供了相对于 refs 方法的灵 active ，因为如果您使用 refs，您将很难在其他组件中访问该表单。通过这种方法，所有信息都在您的状态上，因此您可以随时访问它，只要您管理您的 Prop 。