Question

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

该应用程序是一个简单的Todo列表，具有本地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;

更改为Material-UI依赖项时，保存功能不再有效 - React

1 个答案: