如何更改 li 标签内的特定组件reactjs；

如何解决如何更改 li 标签内的特定组件reactjs；

我编写了一个包含无序列表的 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 的值从单击更改为单击。而且我还需要在功能组件中进行。

解决方法

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

,

向组件添加一个 state，即一个对象并使用索引作为键：

const App = (props) => {
  const [state,setState] = React.useState({ 0: false,1: true });

  const changethislistate = (id) => {
    setState((prev) => ({ ...prev,[id]: !prev[id] }));
  };

  const data = [{ name: "First" },{ name: "Second" }];
  return (
    <div>
      <ul>
        {data.map((value,index) => {
          return (
            <li key={value.id}>
              <div>{value.name}</div>
              <button onClick={() => changethislistate(index)}>
                {state[index] ? "clicked" : "click"}
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

这是一个可以运行的 codepen。

,

On Additional to answer up，您可以在不使用状态的情况下更改它。您可以使用参考。

import React,{ useRef } from 'react';

const App = () => {
  const data = [{id:1,name:"test1"},{id:2,name:"test2"}];
  const ref =useRef([]);
  const changethislistate=(id)=>{
    ref.current[id].innerText="clicked"
  }
  
  return (<div>
  <ul>
      {data.map((value,index) => <li key={value.id}>
              <div >
                  {value.name}
              </div>
              <button 
              ref={(element) => ref.current[index] = element}
              onClick={()=>changethislistate(index)}
              >
                  click
              </button>
          </li>
      )}
  </ul>
</div>)
}
export default App;