使用 ReactJS 在 onClick 之后隐藏子组件元素

Question

我是 React 新手，通过编码学习，这里我有组件 A，它具有带有 menuItems 的选择元素（所有材料 ui），当用户单击选择元素并从下拉列表中选择时，就在用户选择整个组件之后应该去显示：无，这可能吗？我的意思是用户应该不能再在页面上看到选择元素了

英语不是我的母语，所以可能会有错误。

建议/帮助表示赞赏。

组件 A：

const A: React.FC<AProps> = (props) => {
  const handleChange = (e: React.ChangeEvent<{ value: unknown }>) => {
    const site = e.target.value as string;
    dispatch(changeActiveSite(site));
    if (site) {
      dispatch(getAnalysers(site));
    } else {
      dispatch(clearSiteData(site));
    }
  };

  const sites = [
    {
      ident: "",
      name: "None",
    },
  ].concat(sitess);


  return (
    <React.Fragment>
      <FormControl className={classes.formControl}>
        <InputLabel id="site-select-input-label">site</InputLabel>
        <Select
          id="site-select"
          value={currentSiteId}
          labelId="site-select-input-label"
          onChange={(e) => handleChange(e)}
        >
          {sites.map((site) => {
            return (
              <MenuItem key={site.ident} value={site.ident}>
                {site.name}
              </MenuItem>
            );
          })}
        </Select>
      </FormControl>
    </React.Fragment>
  );
};

该组件位于组件 B 中，如下所示： <div > <A site={site} /> </div>

Answer 1

让我们想象一下您的MenuItem.js，特别是它的render() 和constructor()。你会希望它能够被隐藏/不显示，或可见/显示。使用hidden 的状态属性来控制它，您的渲染可能看起来像...

constructor(props) {
    super(props);
    this.state = {
        'hidden':false,
    };
}

render () {
    if(this.state.hidden) {
        return '';
    }
    
    return (
        <div
            onClick={(e) => this.handleOnClick(e)}
        >
            {this.props.value}
        </div>
    );
}

请注意，我还在上面添加了一个 handleOnClick(e) 处理程序！那只会调用this.setState({'hidden':true})，所以就像...

handleOnClick(e) {
    this.setState({'hidden':true});
}

我在其他地方也有类似问题的答案，如果它也可能有帮助：How to set one component's state from another component in React