javascript - 如何更改 li 标签内的特定组件(react js)；

Question

我写了一个 React 函数式组件，里面有一个无序列表。每个 li 都有一个特定的键。在 li 里面有一个 div 标签和一个按钮。我需要在点击时更改特定按钮的状态。

    <div>
        <ul>
            {data.map((value,index) => {
                return <li key={value.id}>
                    <div>
                        {value.name}
                    </div>
                    <button
                    onClick={changethislistate}
                    >
                        click
                    </button>
                </li>
            })}
        </ul>
    </div>

单击单击按钮时，我只需要将那个 li 的值从 click 更改为 clicked。而且我还需要在功能组件中执行此操作。

Answer 1

为 li 个项目创建一个组件，这样每个项目都可以管理它自己的状态:

const ListItem = ({value}) => {
  const [clicked, setClicked] = useState(false);
  return (
    <li>
      <div>{value.name}</div>
      <button onClick={()=> setClicked(prev => !prev)}>{clicked ? "clicked" : "click"}</button>
    </li>
  );
};

然后:

<div>
   <ul>
     {data.map((value,index) => {
        return <ListItem key={value.id} value={value} />        
     })}
   </ul>
</div>