如何更改 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

向组件添加一个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 来玩一下。

Answer 2

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

Answer 3

在附加回答上，您可以在不使用状态的情况下更改它。您可以使用参考资料。

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;

如何更改 li 标签内的特定组件（react js）；

How to change the specfic component inside an li tag (reactjs);

javascript

frontend

reactjs

mern