Material UI与ReactJS：TextField组件使用ref无法获取输入值问题

嘿，我明白你遇到的困扰了——把原生input换成Material UI的TextField后，原来靠ref拿值的方式突然失效了对吧？这是因为Material UI的TextField是封装过的React组件，不是原生DOM元素，直接用ref拿到的是TextField组件实例，而非内部的input节点，自然就取不到输入值啦。

下面给你两种靠谱的解决方案：

方案1：用inputRef获取原生input元素 #

Material UI的TextField专门提供了inputRef属性，用来直接获取内部的原生input DOM节点，你可以沿用原来的逻辑，只需要把ref换成inputRef就行：

<form onSubmit={(e) => this.goToNextStep(e)}>
  <TextField
    type="text"
    className="form-control"
    placeholder="Name"
    pattern="[A-Za-z-]{1,}"
    required
    inputRef={(input) => {this.nameInput = input}}
  />
  <RaisedButton label="GO" color="primary" primary={true} type="submit" />
</form>

对应的goToNextStep函数不用修改，依然能通过this.nameInput.value拿到输入值：

goToNextStep = (event) => {
  event.preventDefault();
  const name = this.nameInput.value;
  // 后续业务逻辑...
}

方案2：使用受控组件（推荐） #

更贴合React单向数据流理念的方式是用state管理输入值，这种模式也更利于后续的维护和扩展：

首先在组件里初始化状态：

state = {
  name: ''
};

然后把TextField改成受控组件，绑定value和onChange事件：

<form onSubmit={(e) => this.goToNextStep(e)}>
  <TextField
    type="text"
    className="form-control"
    placeholder="Name"
    pattern="[A-Za-z-]{1,}"
    required
    value={this.state.name}
    onChange={(e) => this.setState({ name: e.target.value })}
  />
  <RaisedButton label="GO" color="primary" primary={true} type="submit" />
</form>

最后在goToNextStep里直接从state取值：

goToNextStep = (event) => {
  event.preventDefault();
  const name = this.state.name;
  // 后续业务逻辑...
}

如果只是快速迁移代码，方案1更省事；要是长期维护的项目，方案2的受控组件模式会更健壮哦。

内容的提问来源于stack exchange，提问作者Cohchi