Material-UI与React：将<input>替换为<TextField>致表单提交失效

嘿，我来帮你搞定这个头疼的问题！你遇到的核心原因是Material-UI的TextField是封装过的组件，和原生input的ref获取、值的读取逻辑不一样——之前用原生input时直接通过ref拿DOM元素取value没问题，但换成TextField后，原来的写法就失效了。下面给你两种靠谱的解决办法：

方法一：用React受控组件模式（推荐） #

这是React官方更提倡的表单处理方式，通过state来管理输入值，完全避开ref的坑，代码也更清晰：

首先在组件的构造函数里初始化状态，绑定处理函数：

constructor(props) {
  super(props);
  this.state = {
    newTask: "" // 用来存储输入框的值
  };
  // 绑定函数上下文
  this.handleInputChange = this.handleInputChange.bind(this);
  this.handleCreate = this.handleCreate.bind(this);
}

// 监听输入框变化，更新state
handleInputChange(e) {
  this.setState({ newTask: e.target.value });
}

// 表单提交逻辑
handleCreate(e) {
  e.preventDefault();
  const taskContent = this.state.newTask.trim();
  if (taskContent) {
    // 这里执行你的创建任务逻辑，比如调用父组件的方法
    // 例：this.props.addTask(taskContent);
    // 清空输入框
    this.setState({ newTask: "" });
  }
}

然后修改render里的表单代码：

render() {
  return(
    <form onSubmit={this.handleCreate}>
      <TextField 
        name="CreateNew" 
        type="text" 
        value={this.state.newTask} // 绑定state的值
        onChange={this.handleInputChange} // 绑定变化事件
        placeholder="task..."
      />
      <FlatButton type="submit">Create</FlatButton>
      {this.renderError()}
    </form>
  )
}

方法二：用inputRef获取原生input元素 #

如果你还是想用ref的方式来获取输入值，要注意Material-UI的TextField提供了专门的inputRef属性，用来指向底层的原生input元素，而不是用普通的ref（普通ref拿到的是TextField组件实例，不是DOM元素）：

首先在构造函数里创建ref：

constructor(props) {
  super(props);
  this.createInputRef = React.createRef();
  this.handleCreate = this.handleCreate.bind(this);
}

// 修改提交逻辑，通过inputRef获取值
handleCreate(e) {
  e.preventDefault();
  const inputElement = this.createInputRef.current;
  const taskContent = inputElement.value.trim();
  if (taskContent) {
    // 执行创建任务逻辑
    inputElement.value = ""; // 清空输入框
  }
}

然后修改render里的TextField：

render() {
  return(
    <form onSubmit={this.handleCreate}>
      <TextField 
        name="CreateNew" 
        type="text" 
        inputRef={this.createInputRef} // 用inputRef替代ref
        placeholder="task..."
      />
      <FlatButton type="submit">Create</FlatButton>
      {this.renderError()}
    </form>
  )
}

为什么原来的写法会失效？ #

你之前用ref="createInput"拿到的是Material-UI的TextField组件对象，而不是原生的<input>DOM元素，所以当你在handleCreate里尝试读取this.refs.createInput.value时，自然拿不到正确的输入值，导致提交逻辑出错。而换回原生input时，ref直接指向DOM元素，就能正常取值了。

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