Reactjs React js-单击添加唯一键

我遇到了一个问题，就是如何设置一个键，这样当我单击编辑按钮时，输入字段必须显示在行上，这取决于我单击的行

当我点击编辑按钮时，该行的所有输入字段都会显示出来

这是我的密码：

constructor(props) {
    super(props);
    this.state = { 
        editable: false,
};

以下是单击“单击”按钮时正在执行的函数：

  edit = () => {
    this.setState({
      editable: true,
    })
  }

这是我的循环，我想把钥匙放在这里

for (let i = 0; i < data.length; i++){
    withKeys = {
     ...data[i],
     key: i,
     actionIndex: (
     <>
     {this.state.editable ? (
      <span>
        <EditableContext.Consumer>
           {form => (
             <a
               onClick={() => this.save(form, data[i])}
               style={{ marginRight: 8 }}
             >
               Save
             </a>
     )}
     </EditableContext.Consumer>
       <Popconfirm title="Sure to cancel?" onConfirm={this.cancel}>
         <a>Cancel</a>
       </Popconfirm>
     </span>
      ):
     <Button 
      onClick={this.edit}
      ghost
      type="primary"
      >
        Edit
    </Button> }

for（设i=0；i(
保存（表单，数据[i]））
样式={{marginRight:8}
>
拯救
)}
取消
):
编辑
}

---

如何添加键，以便在单击编辑按钮时，输入字段必须根据我选择编辑按钮的行显示。顺便说一下，我使用ant design时，如果您有一个项目列表，您必须为每个项目保持

可编辑状态。在您的代码中，只有一个
可编辑状态控制每个元素一种方法是：你可以给每个被迭代的元素一个id。然后保持这样的状态：
{editable:}
当你读取数据时，如果
editable
状态与当前元素匹配，那么你就显示编辑表单。
使用编辑索引

constructor(props) {
  super(props);
  this.state = { 
    editIndex: null, // null == no edit
  };
};

for (let i = 0; i < data.length; i++){
  withKeys = {
   ...data[i],
   key: i,
   actionIndex: (
   <>
     {this.state.editIndex === i ? ( // if editIndex matches current index show edit form
     <span>
     <EditableContext.Consumer>
       {form => (
         <a
           onClick={() => this.save(form, data[i])}
           style={{ marginRight: 8 }}
         >
           Save
         </a>
   )}
   </EditableContext.Consumer>
     <Popconfirm title="Sure to cancel?" onConfirm={this.cancel}>
       <a>Cancel</a>
     </Popconfirm>
   </span>
  ):
  <Button 
   onClick={this.edit(i)} // set callback to enclose index
   ghost
   type="primary"
  >
    Edit
  </Button> }

更新编辑处理程序以获取索引并返回回调函数（这是一个高阶函数）

然后在渲染函数中，将当前索引检查为编辑索引

constructor(props) {
  super(props);
  this.state = { 
    editIndex: null, // null == no edit
  };
};

for (let i = 0; i < data.length; i++){
  withKeys = {
   ...data[i],
   key: i,
   actionIndex: (
   <>
     {this.state.editIndex === i ? ( // if editIndex matches current index show edit form
     <span>
     <EditableContext.Consumer>
       {form => (
         <a
           onClick={() => this.save(form, data[i])}
           style={{ marginRight: 8 }}
         >
           Save
         </a>
   )}
   </EditableContext.Consumer>
     <Popconfirm title="Sure to cancel?" onConfirm={this.cancel}>
       <a>Cancel</a>
     </Popconfirm>
   </span>
  ):
  <Button 
   onClick={this.edit(i)} // set callback to enclose index
   ghost
   type="primary"
  >
    Edit
  </Button> }

for（设i=0；i(
保存（表单，数据[i]））
样式={{marginRight:8}
>
拯救
)}
取消
):
编辑
}

完成编辑后，请确保将
editIndex
设置回
null
。
它不起作用，当我单击编辑按钮时输出，输入字段不起作用showing@Euph我不熟悉forLoop代码片段呈现/构造react组件的方式，但首先让我们检查
edit
处理程序是否正确请直接设置要编辑的索引的状态。您能试试吗？它现在只适用于保存和取消文本，因此，当我单击编辑按钮时，所有输入字段都会显示，但保存和取消文本现在可以显示，具体取决于我单击的行。唯一的问题是，当我单击编辑按钮时，所有输入字段都会显示n已单击“编辑”按钮