时间戳

首页 > 解决方案 > 映射时为数组中的特定项目输入文本字段？

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>

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

标签： javascripthtmlcssarraysreactjs

解决方案

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

在数组中的每个对象上都有一个 updateBox 属性，并在真假之间切换。

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

function App(){

  function setUpdateBox(id){
    const copyState = [...readData];
    const thisItem = copyState.find(x => x.id == id);
    thisItem.updateBox = !thisItem.updateBox;
    setData(copyState);
  }
  
  function deleteMessage(id){
    const copyState = [...readData].filter(x => x.id != id);
    setData(copyState);
  }
  
  const initData = [
    {id: 1, updateBox: true, data: {message: "hello"}},
    {id: 2, updateBox: true, data: {message: "world"}},
  ]
  
  const [readData, setData] = React.useState(initData);
  
  return (
  <div className="read-data">
    {readData.length >= 1 ? readData.map((res)=>(
     <div>
     <h2>{res.data.message}</h2>
     <button onClick={()=>setUpdateBox(res.id)}>
       Update
     </button>
     {res.updateBox ? (
        <div>
          <form>
            <input type="text" name="textarea" placeholder="Update message"/>
          </form>
        </div>
     ):null}
      <button onClick={()=>deleteMessage(res.id)}> Delete</button>
      </div>
    )):null}
  </div>
  );
}

  
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读