Question

使用以下方法：

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

我正在尝试使用Material-UI的<TextField/>正确返回输入文本，而<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的操作。 redux中的大多数表单都可以这样工作。请记住，我为这些道具和行动所做的名称就是例如。如果您有一个大表单，您可能需要考虑将状态树的一部分专用于表单本身：

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

我喜欢用redux做这个，因为我可以让那个架构构成状态的一部分看起来就像我发送它的地方的json有效负载一样，所以我可以发送表单，我想发送它。

无论如何，回到这个例子。现在点击handleClick。您需要做的就是获得价值：

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

由于每次更改都会更新文本字段，因此您始终可以在您的州内访问该文本字段。这也为refs方法提供了灵活性，因为如果使用refs，您将很难在其他组件中访问该表单。使用这种方法，所有信息都在您的状态，因此您可以随时访问它，只要您管理道具。

Answer 2

您应该使用onChange = {}来获取值：

_onChange = (e) => {
    console.log(e.target.value);
}

<TextField
    onChange={this._onChange}
/>

Answer 3

这是一个比使用onchange事件更好的解决方案，我们直接得到材料-ui textField创建的输入值：

  create(e) {
    e.preventDefault();
    let name = this.refs.inputText.input.value;
    alert(name);
  }

  constructor(){
    super();
    this.create = this.create.bind(this);
  }

  render() {
    return (
          <form>
            <TextField ref="inputText" hintText="" floatingLabelText="Your name" /><br/>
            <RaisedButton label="Create" onClick={this.create} primary={true} />
          </form>
    )}

希望这会有所帮助。

如何在ReactJS中使用ref =''和<input />正确返回Material-UI的<textfield>？

3 个答案: