【问题标题】：Changing the state of a React Component更改 React 组件的状态
【发布时间】：2021-05-11 19:03:37
【问题描述】：
也许这是我措辞的方式，但我没有得到我想要的关于以下主题的答案。所以目前，我的代码看起来像这样（减去所有细节）：
<ClickAwayListener onClickAway={handleClickAway}>
<Autocomplete options={someList} />
</ClickAwayListener>
所以我有两个问题。
- 这里的自动完成组件是否被认为是 ClickAwayListener 的扩展？ ClickAwayListener 是否被视为父组件？
- 我希望 handleClickAway 函数更改自动完成中的 options 状态。我该怎么做？
我对 React 还很陌生，因此我将不胜感激。提前谢谢你。
【问题讨论】：
标签：
reactjs
typescript
parent-child
react-component
【解决方案1】：
看起来您使用的点击离开组件很可能不是按预期使用的方式使用的。看起来应该和this technique一起使用。
<ClickAwayListener onClickAway={handleClickAway}>
{(isClickedAway) => (
{/*or whatever api your Autocomplete has*/}
<Autocomplete options={someList} isOpen={!isClickedAway} />
)}
</ClickAwayListener>
关于你的问题：
- ClickAwayListener 是 Autocomplete 的父级。反应树中没有扩展之类的东西。
- 在您的
handleClickAway 中，您必须更改someList。如果它来自 state，那么使用 setState，如果它来自 props - 则带有相应的回调。