javascript - 映射时数组中特定元素的输入文本字段？

Question

我正在尝试映射数组并尝试根据按钮点击更新特定元素。

<div className="read-data">
    {readData.length >= 1 ? readData.map((res)=>(
     <div>
     <h2>{res.data.message}</h2>
     <button onClick={()=>{
          (setUpdateBox(true))
       }}>
       Update
     </button>
     {updateBox ? (
        <div>
          <form>
            I<input type="text" name="textarea" placeholder="Update message"/>
          </form>
        </div>
     ):null}
      <button onClick={()=>{
        deleteMessage(res)}}> Delete</button>
      </div>
    )):null}
  </div>

它为数组中的每个元素打开文本区域。但我想要输入文本框，用于单击相应按钮的唯一元素。 请帮助如何做到这一点。

Answer 1

您可能会发现该解决方案对您有用。

• 您需要为每个元素设置唯一索引或任何标识符。
• 在每次更新或删除操作时，您都可以通过索引访问元素
• 使用 ref 引用输入以获取值

我假设你传递了一个对象数组作为 props

const readData = [
  {
    data: {
      message: "new message 1"
    }
  },
  {
    data: {
      message: "new message 2"
    }
  },
  {
    data: {
      message: "new message 3"
    }
  },
  {
    data: {
      message: "new message 4"
    }
  }
];

读取数据组件

function ReadDataComponent({readData}) {
  let inputRef = React.useRef();

  const [updateBox, setUpdateBox] = React.useState(readData);

  const deleteMessage = (i) => {
    const updatedBox = [...updateBox];
    let filteredBox = updatedBox.filter((_, index) => i !== index);
    setUpdateBox(filteredBox);
  };

  const showUpdateBox = (i) => {
    const updatedBox = [...updateBox];
    updatedBox[i].isOpen = updatedBox[i].isOpen ? !updatedBox[i].isOpen : true;
    updatedBox[i].data.message = inputRef.current
      ? inputRef.current.value
      : updatedBox[i].data.message;
    setUpdateBox(updatedBox);
  };

  return (
    <div className="read-data">
      {readData.length >= 1
        ? updateBox.map((res, i) => (
            <div key={i}>
              <h2>{res.data.message}</h2>
              <button
                onClick={() => {
                  showUpdateBox(i);
                }}
              >
                Update
              </button>
              {res.isOpen ? (
                <div>
                  <form>
                    <input
                      ref={inputRef}
                      type="text"
                      name="textarea"
                      placeholder="Update message"
                    />
                  </form>
                </div>
              ) : null}
              <button
                onClick={() => {
                  deleteMessage(i);
                }}
              >
                {" "}
                Delete
              </button>
            </div>
          ))
        : null}
    </div>
  );
}

live demo