将改变状态的函数传递给子组件答案

【问题标题】：Passing a function thact changes state to child component将改变状态的函数传递给子组件
【发布时间】：2021-10-29 21:06:51
【问题描述】：

我现在正在做一个组件，但遇到了一个问题。我的父组件中有一个 useState

const [selectedVacation, setSelectedVacation] = useState(null);

还有一个函数，它接受一个参数并将其放入状态中

const selectVacation = (vacation) => setSelectedVacation(vacation);

然后，有一个组件，我将我的函数传递给它，它应该更新状态

<AdminCatalog
  vacations={vacations}
  selectVacation={selectVacation}
/>

在这个组件中，我映射假期并为每个假期渲染一个组件，并希望在用户单击其中一个组件时更新我在父组件中的状态。

<ItemsWrap>
  {vacations?.map((vacation) => (
    <AdminItem
      onClick={selectVacation(vacation)}
      key={vacation._id}
      vacation={vacation}
    />
  ))}
</ItemsWrap>

但是，这不起作用，我真的不明白为什么。谁能帮我解决这个问题？

在 AdminItem 组件内部，还有另一个组件 AdminSelect

    <AdminSelect
      photo={updatedPhoto}
      title={user.name}
      startDate={moment(vacation.startDate).format('DD/MM/YYYY')}
      endDate={moment(vacation.endDate).format('DD/MM/YYYY')}
      date={date}
    />

【问题讨论】：

你的AdminItem里面有什么？
@RyanLe 还有一个组件，它解构假期，使用属性作为道具。
您能在问题中提供吗？当用户点击AdminItem 组件时，您想更新状态吗？
@RyanLe 我添加了另一个组件。是的，确切地说，我希望在单击组件时更新它，以便将 vacation 传递给 useState
尝试将您的 AdminItem 内容包裹在 HTML 元素周围。请参阅下面的答案。

标签： reactjs react-hooks use-state

【解决方案1】：

您将selectVacation(vacation) 的结果分配给AdminItem 的onClick 属性。相反，您需要传递对函数的引用（而不是其评估的结果），它可以用粗箭头函数定义：

<ItemsWrap>
  {vacations?.map((vacation) => (
    <AdminItem
      onClick={() => selectVacation(vacation)}
      key={vacation._id}
      vacation={vacation}
    />
  ))}
</ItemsWrap>

还要注意selectVacation没用，可以直接用setSelectedVacation。

【讨论】：

【解决方案2】：

onClick 事件默认在 Reactjs 组件上不可用，您需要从 HTML 元素传递该事件

在您的 AdminItem 中，使用 html 元素包装您的子组件：

类似这样的：

export default function AdminItem({onclick}) {
  return (
    <div onClick={() => onClick()}>{children}</div>
  );
}

通过这样做，来自 HTML 元素的onClick 事件将传递给您的父组件。

虽然，不建议在 div 元素上使用 onClick 事件。尝试将您的孩子放在<button> 或<a> 标签内，但您将不得不处理一些 eslint 规则和 HTML 标准。

【讨论】：