Question

我试图创建一个react组件。如果用户单击待办事项上的“编辑”按钮，则应使用文本字段替换特定的单击的待办事项区域。

我期望看到什么

当用户单击待办事项之一时，该项目将进入文本字段，然后可以对其进行编辑。

我实际上看到了什么

当用户单击待办事项之一时，所有项目都将进入文本字段。

这是我的代码：

父母

req.files

孩子（EDITBUTTON）：

handleEditClick = (e,id,text) => {
    this.setState({val: !this.state.val})
  }


  render() {

    return (
     <div style={{display: "flex"}}>
       <div>
         {this.props.todos.map(todo => (
           <div key={todo.id}>
            <EditButton todo={todo} val={this.state.val} text={this.state.text} 
            handleEditClick={(e, id, text) => this.handleEditClick(e, id, text)}/>
          </div>
         ))}
     </div>
     </div>
    )
  }
}

Answer 1

此示例尚未完成，但确实显示了如何实现您所描述的内容。带有代码的程序就是您更新编辑状态时的程序，它正在更新每个项目的状态。

https://codesandbox.io/s/x7rvqm6xz4

map["1"]

基本上，此组件会列出待办事项。将它们置于一种状态，该状态跟踪是将它们显示为待办事项还是import React from "react"; import { Button, TextField } from "@material-ui/core"; class Todos extends React.Component { constructor(props) { super(props); this.state = { todos: null }; } componentDidMount() { this.setState({ todos: this.props.todos.map(todo => ({ name: todo, isEdit: false })) }); } handleEdit(name) { const { todos } = this.state; const updateTodos = todos.map(todo => { if (todo.name === name) { return { name: todo.name, isEdit: !todo.isEdit }; } return todo; }); this.setState({ todos: updateTodos }); } _renderTodos() { if (!this.state.todos) { return null; } return this.state.todos.map(todo => { return ( <div key={todo.name}> {todo.isEdit ? <TextField /> : <span>{todo.name}</span>} <Button onClick={() => this.handleEdit(todo.name)}>Click</Button> </div> ); }); } render() { if (!this.props.todos.length > 0) { return null; } return <div>{this._renderTodos()}</div>; } } export default Todos;。

Answer 2

我以前做过。参见CODESANDBOX。

有TodoList类可以接受todos和saveEditedTodo作为道具。它具有editedTodo状态，该状态会在单击“编辑”按钮时发生变化。当然，它包含id和text。

import React from "react";

export default class extends React.Component {
  state = {
    editedTodo: null
  };

  toggleEditTodo = (todo = null) => {
    this.setState({ editedTodo: todo });
  };

  onChangeTodoText = text => {
    this.setState(prevState => ({
      editedTodo: Object.assign(prevState.editedTodo, { text })
    }));
  };

  submitTodoForm = e => {
    e.preventDefault();
    this.props.saveEditedTodo(this.state.editedTodo);
    this.setState({
      editedTodo: null
    });
  };

  render() {
    const { editedTodo } = this.state;
    const { todos } = this.props;
    return (
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo === editedTodo ? (
              // Show text field
            ) : (
              // Show todo
            )}
          </li>
        ))}
      </ul>
    );
  }
}

将单个待办事项更改为文本字段而不是所有待办事项时

2 个答案: