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

我有两个独立的元素（不是父子）。

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

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

最佳答案

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

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

这在ReactJS中称为Lifting State Up。

关于javascript - 在React js中单击element1时，如何执行对element2的单击？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59350698/