Javascript 映射时为数组中的特定项输入文本字段？

我试图映射到一个数组，并试图根据一个按钮点击更新一个特定的项目

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

{readData.length>=1？readData.map（（res）=>(
{res.data.message}
{
（设置日期框（真））
}}>
更新
{updateBox(
我
)：null}
{
deleteMessage（res）}>Delete
))：null}

它为数组中的每个项目打开文本区域。但我想输入文本框中唯一一个点击了相应按钮的项目。

---

请告诉我怎么做。

你可以这样做。不确定是否要使用状态或道具，或两者兼而有之

在数组中的每个对象上都有updateBox属性，并在true和false之间切换

当用户在输入框中键入消息时，您可能应该添加另一个函数来更新消息属性

函数应用程序（）{
函数设置日期框（id）{
const copyState=[…读取数据]；
constThisItem=copyState.find（x=>x.id==id）；
thisItem.updateBox=！thisItem.updateBox；
设置数据（复制状态）；
}
函数deleteMessage（id）{
const copyState=[…readData].filter（x=>x.id！=id）；
设置数据（复制状态）；
}
常量initData=[
{id:1，updateBox:true，数据：{message:“hello”}，
{id:2，updateBox:true，数据：{message:“world”}，
]
const[readData，setData]=React.useState（initData）；
返回(
{readData.length>=1？readData.map（（res）=>(
{res.data.message}
setUpdateBox（res.id）}>
更新
{res.updateBox(
)：null}
deleteMessage（res.id）}>Delete
))：null}
);
}
ReactDOM.render（，document.getElementById（'root'））
您可能会发现该解决方案对您很有用


您需要为每个元素设置唯一索引或任何标识符
在每次更新或删除操作中，您都可以通过其索引访问元素
使用
ref

我假设您将一组对象作为道具传递

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

函数ReadDataComponent（{readData}）{
让inputRef=React.useRef（）；
const[updateBox，setUpdateBox]=React.useState（readData）；
const deleteMessage=（i）=>{
const updatedBox=[…updateBox]；
让filteredBox=updatedBox.filter（（（uu，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）；
};
返回(
{readData.length>=1
？updateBox.map（（res，i）=>(
{res.data.message}
{
showUpdateBox（i）；
}}
>
更新
{res.isOpen(
)：null}
{
删除消息（i）；
}}
>
{" "}
删除
))
：null}
);
}

解决此问题的一种方法是，您需要存储每个项目的索引，并将其打开/关闭状态存储在setUpdateBox中，因此它可能看起来像
setUpdateBox（priorState=>{…priorState，i:true}）
其中
i
是一个索引。本质上，您是在对象中存储状态