代码之家 › 专栏 › 技术社区 › kuk

如何在React中回调后动态更改状态的对象值?

state react-hooks reactjs

kuk · 技术社区 · 3 年前

菜鸟问题。请考虑下面的代码片段:

export const Parent = ({data}) => {
  const [myData, setShowResults] = useState({isOpen: false, title: 'test'})

  function handleCheck(evt) {
      console.log(evt.currentTarget.textContent);
      //how to change current myData.title with evt.currentTarget.textContent?

  }
  return (
    <div className='c-dropdown'>
        <Child data={data} isOpen={myData.isOpen} onCheck={handleCheck}/>
        <p>{myData.title}</p>
    </div>
  );
}

在handleCheck回调函数中,我收到了所需的信息,但我找不到如何更改我的数据的方法。标题和新收到的信息。

1 回复 | 直到 3 年前

Drew Reese 3 年前

使用功能状态更新并浅复制上一个状态对象。

例子:

function handleCheck(evt) {
  const { textContent } = evt.currentTarget;
  console.log(textContent);
  setShowResults(data => ({
    ...data,            // <-- copy previous state
    title: textContent, // <-- update property
  }));
}

推荐文章