Javascript 将单个todo更改为文本字段而不是所有todo时

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

我希望看到什么

当用户单击其中一个待办事项时，该事项将变成一个文本字段，然后可以对其进行编辑

我究竟看到了什么

当用户单击其中一个待办事项时，所有项目都变成文本字段

这是我的密码：

母公司

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>
    )
  }
}

handleEditClick=（e，id，text）=>{
this.setState（{val:！this.state.val}）
}
render（）{
返回(
{this.props.todos.map（todo=>(
this.handleEditClick（e，id，text）}/>
))}
)
}
}

子（编辑按钮）：

const EditButton=（道具）=>{
如果（！props.val）{
返回(
this.updateTodo（props.todo）}
>
props.handleEdit单击（e，props.todo.id，props.todo.text）}
>
编辑图标
this.removeTodo（props.todo）}>
)
}否则{
返回(
)
}
}

此示例并不完整，但它确实展示了如何实现您所描述的内容。该程序与您的代码是当您更新编辑状态时，它正在更新每个项目的状态

从“React”导入React；
从“@material ui/core”导入{Button，TextField}”；
类Todos扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
待办事项：空
};
}
componentDidMount（）{
这是我的国家({
todos:this.props.todos.map（todo=>（{name:todo，isEdit:false}））
});
}
handleEdit（名称）{
const{todos}=this.state；
const updateTodos=todos.map（todo=>{
如果（todo.name==名称）{
返回{name:todo.name，isEdit:！todo.isEdit}；
}
返回待办事项；
});
this.setState（{todos:updateTodos}）；
}
_renderTodos（）{
如果（！this.state.todos）{
返回null；
}
返回此.state.todos.map（todo=>{
返回(
{todo.isEdit？：{todo.name}
this.handleEdit（todo.name）}>单击
);
});
}
render（）{
如果（！this.props.todos.length>0）{
返回null；
}
返回{this.\u rendertos（）}；
}
}
导出默认TODO；

---

基本上，该组件获取TODO列表。将它们放入一个状态，该状态跟踪是否将它们显示为TODO或

TextField

我以前已经这样做过。再见

有一个

TodoList

类可以接受

todo

和

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>
    );
  }
}

从“React”导入React；
导出默认类扩展React.Component{
状态={
editedTodo:null
};
ToggleEditodo=（todo=null）=>{
this.setState（{editedTodo:todo}）；
};
onChangeTodoText=text=>{
this.setState（prevState=>({
editedTodo:Object.assign（prevState.editedTodo，{text}）
}));
};
submitTodoForm=e=>{
e、 预防默认值（）；
this.props.saveEditTodo（this.state.EditTodo）；
这是我的国家({
editedTodo:null
});
};
render（）{
const{editedTodo}=this.state；
const{todos}=this.props；
返回(

{todo.map（todo=>(

{todo===编辑的todo(
//显示文本字段
) : (
//显示待办事项
)}

))}

);
}
}

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;

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>
    );
  }
}