javascript - 如何更改 li 标签内的特定组件（reactjs）；

Question

我编写了一个反应功能组件，其中包含一个无序列表。每个 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。而且我还需要在功能组件中执行此操作。

标签： javascriptreactjsfrontendmern

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>