javascript - React js中点击element1时如何执行对element2的点击？

Question

我有两个独立的元素(不是父子元素)。

是否可以完成这样的行为:在单击 StyledSearchInput 时实际上单击了 StyledDropDownInputAsync。

        <StyledSearchInput/>
        <StyledDropdownInputAsync searchIcon
          className="options"
          placeholder="Search"
          loadOptions={loadOptions}
          onChange={this.handleSelection}
          cache={{}}
          filterOptions={(options) => (options)}>
        </StyledDropdownInputAsync>

Answer 1

将它们包装在父组件中，定义点击状态，将点击状态传递给 StyledDropdownInputAsync，将点击操作传递给 StyledSearchInput。

const ParentComp = () => {
  const [isClicked, setClick] = useState(false);
  return (
    <>
      <StyledSearchInput onClick={() => setClick(true)}/>
      <StyledDropdownInputAsync isClicked={isClicked} {...otherProps}>
      </StyledDropdownInputAsync>
    </>
  );
};

这称为 Lifting State Up在 ReactJS 中。