javascript - 更改为 Material-UI 依赖项时，保存功能不再起作用 - React

Question

我更改了 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);
  }
}

Answer 1

更改获取文本框值的方式

const newTask = this.refs.editInput.value;

至

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