我更改了 ReactJS 代码以合并 Material-UI 依赖项，但是现在看来，重新分配传递的信息值的“保存”功能不再起作用......

该应用程序是一个简单的待办事项列表，具有本地 CRUD 功能 - 添加新任务可以工作，删除特定任务也可以工作，但是，最初在编辑任务名称时，它会保留新名称。但现在，当单击“保存”按钮时，任务名称就会消失。

这是一个codesandbox包含所有代码。

这是具有保存功能的文件

import React from 'react'; 
import TextField from 'material-ui/TextField'; 
import { 
  Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn, 
} from 'material-ui/Table'; 
import FlatButton from 'material-ui/FlatButton'; 
 
export default class TodosListItem extends React.Component { 
  constructor(props) { 
    super(props); 
 
    this.state = { 
      isEditing: false 
    }; 
  } 
 
  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 name={task} type="text" defaultValue={task} ref="editInput" /> 
          </form> 
        </TableRowColumn> 
      ) 
    } 
 
    return ( 
      <TableRowColumn style={taskStyle} onClick={this.props.toggleTask.bind(this, task)}> 
        {task} 
      </TableRowColumn> 
    ) 
  } 
 
  renderActionSection() { 
    if (this.state.isEditing) { 
      return ( 
        <TableRowColumn> 
          <FlatButton onClick={this.onSaveClick.bind(this)}>Save</FlatButton> 
          <FlatButton onClick={this.onCancelClick.bind(this)}>Cancel</FlatButton> 
        </TableRowColumn> 
      ); 
    } 
    return ( 
      <TableRowColumn> 
        <FlatButton onClick={this.onEditClick.bind(this)}>Edit</FlatButton> 
        <FlatButton onClick={this.onDeleteClick.bind(this)}>Delete</FlatButton> 
      </TableRowColumn> 
    ); 
  } 
 
  render() { 
    return ( 
      <TableRow> 
        {this.renderTaskSection()} 
        {this.renderActionSection()} 
      </TableRow> 
    ) 
  } 
 
  onEditClick() { 
    this.setState({ isEditing: true }); 
  } 
 
  onCancelClick() { 
    this.setState({ isEditing: false }); 
  } 
 
  onSaveClick(event) { 
    event.preventDefault(); 
    const oldTask = this.props.task; 
    const newTask = this.refs.editInput.value; 
    this.props.saveTask(oldTask, newTask); 
    this.setState({ isEditing: false }); 
  } 
 
  onDeleteClick() { 
    const taskToDelete = this.props.task; 
    this.props.deleteTask(taskToDelete); 
  } 
} 

请您参考如下方法:

更改获取文本框值的方式

const newTask = this.refs.editInput.value; 

至

const newTask = this.refs.editInput.input.value;