改变 React 组件的状态

Question

也许这就是我的措辞方式，但我没有得到关于以下主题的想要的答案。所以目前，我的代码看起来像这样（减去所有细节）：

<ClickAwayListener onClickAway={handleClickAway}>
  <Autocomplete options={someList} />
</ClickAwayListener>

所以我有两个问题。

这里的Autocomplete组件算是ClickAwayListener的扩展吗？ ClickAwayListener 是否被视为父组件？
我希望 handleClickAway 函数更改自动完成中的 options 状态。我该怎么做？

我是 React 的新手，所以我很感激任何帮助。提前谢谢你。

Answer 1

看起来您很可能没有按照预期的方式使用点击离开组件。看起来应该与 this technique.

一起使用


<ClickAwayListener onClickAway={handleClickAway}>
  {(isClickedAway) => (
    {/*or whatever api your Autocomplete has*/}
    <Autocomplete options={someList} isOpen={!isClickedAway} />
  )}
</ClickAwayListener>

关于您的问题：

ClickAwayListener 是自动完成的父项。 react tree中没有扩展之类的东西。
在您的 handleClickAway 中，您必须更改 someList。如果它来自 state，则使用 setState，如果它来自 props - 则使用相应的回调。

改变 React 组件的状态

Changing the state of a React Component

parent-child

typescript

reactjs

react-component