引入Material-UI依赖后React Todo列表保存功能失效问题

算力阿峰

2026-5-15

解决Material-UI引入后Todo列表编辑保存时任务名称消失的问题

我帮你排查了下代码，问题出在Material-UI的TextField组件和你原来依赖的原生input取值方式不兼容，再加上一些小的逻辑疏漏，导致保存时拿不到正确的新任务名称，最终出现任务消失的情况。下面是具体的问题分析和修复方案：

问题根源

旧的ref方式不适用于Material-UI组件：你用了字符串ref（ref="editInput"）直接取value，但Material-UI的TextField是封装过的React组件，不是原生input元素，直接访问this.refs.editInput.value大概率拿不到正确的输入值，甚至可能拿到undefined，传给saveTask后就会把任务设为空。
表单与保存按钮的关联问题：你的Save按钮不在form标签内部，点击按钮时form的onSubmit并不会触发，虽然你在按钮的点击事件里调用了onSaveClick并阻止默认，但这不是规范的表单处理方式，也容易引发逻辑混乱。
缺乏编辑状态的数据流控制：你用了defaultValue初始化输入框，但没有实时同步输入内容到组件状态，导致编辑过程中的值无法被正确跟踪。

修复方案（推荐用受控组件，符合React数据流）

我们把TextField改成受控组件，用组件state来管理编辑中的任务名称，彻底解决取值问题：

1. 初始化编辑状态的state

在组件的构造函数里添加editTask字段，用来存储当前编辑的任务内容：

constructor(props) {
  super(props);
  this.state = { 
    isEditing: false,
    editTask: props.task // 用传入的初始任务名称初始化
  };
}

2. 改造TextField为受控组件

去掉defaultValue和ref，绑定value到state，同时添加onChange事件同步输入内容：

// 修改renderTaskSection里的TextField部分
<TextField 
  type="text" 
  value={this.state.editTask} 
  onChange={(e) => this.setState({ editTask: e.target.value })} 
/>

3. 打开编辑时重置输入值

每次点击编辑按钮，都把editTask重置为当前任务的名称，避免编辑其他任务时带上上次的输入残留：

onEditClick() {
  this.setState({ 
    isEditing: true,
    editTask: this.props.task // 重置编辑值为当前任务名称
  });
}

4. 修改保存逻辑，从state取值

直接从组件state里获取新任务名称，不用再依赖ref：

onSaveClick(event) {
  event.preventDefault();
  const oldTask = this.props.task;
  const newTask = this.state.editTask.trim(); // 去掉前后空格，避免空任务

  // 防止保存空内容
  if (newTask) {
    this.props.saveTask(oldTask, newTask);
    this.setState({ isEditing: false });
  }
}

5. 可选：规范表单与按钮的关联

把Save按钮移到form标签内部，让点击Save触发表单提交，更符合表单逻辑：

renderTaskSection() {
  const { task, isCompleted } = this.props;
  const taskStyle = { color: isCompleted ? 'green' : 'red', cursor: 'pointer' }
  
  if (this.state.isEditing) {
    return (
      <TableRowColumn>
        <form onSubmit={this.onSaveClick.bind(this)}>
          <TextField 
            type="text" 
            value={this.state.editTask} 
            onChange={(e) => this.setState({ editTask: e.target.value })} 
          />
          {/* 把Save和Cancel按钮移到form内 */}
          <FlatButton type="submit">Save</FlatButton>
          <FlatButton onClick={this.onCancelClick.bind(this)}>Cancel</FlatButton>
        </form>
      </TableRowColumn>
    )
  }

  return (
    <TableRowColumn style={taskStyle} onClick={this.props.toggleTask.bind(this, task)}>
      {task}
    </TableRowColumn>
  )
}

// 同时修改renderActionSection，编辑状态下不再返回按钮
renderActionSection() {
  if (this.state.isEditing) {
    return null;
  }
  return (
    <TableRowColumn>
      <FlatButton onClick={this.onEditClick.bind(this)}>Edit</FlatButton>
      <FlatButton onClick={this.onDeleteClick.bind(this)}>Delete</FlatButton>
    </TableRowColumn>
  );
}

这样修改后，编辑任务时输入的内容会实时同步到state，保存时能正确获取到新任务名称，就不会出现点击保存后任务消失的情况了。

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