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

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

是否可能实现这样的行为，即在单击StyledSearchInput时实际单击StyledDropDownInputAsync

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

（选项）}>

您可以使用

ref

来实现这些功能

根据文档，

ref提供了一种访问DOM节点或响应在render方法中创建的元素的方法。

您可以使用链接阅读有关参照的更多信息

---

要实现这些功能，请参考代码沙盒

您可以使用

ref

来实现这些功能

根据文档，

ref提供了一种访问DOM节点或响应在render方法中创建的元素的方法。

您可以使用链接阅读有关参照的更多信息

---

要实现这些功能，请参阅代码沙盒，将它们包装在父组件中，定义单击状态，将单击状态传递给

styleddropdownputasync

，将单击操作传递给

StyledSearchInput

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

constparentcomp=（）=>{
const[isClicked，setClick]=useState（false）；
返回(
setClick（true）}/>
);
};

---

这在ReactJS中调用。

将它们包装在父组件中，定义单击状态，将单击状态传递给

StyledDropdownInputAsync

，将单击操作传递给

StyledSearchInput

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

constparentcomp=（）=>{
const[isClicked，setClick]=useState（false）；
返回(
setClick（true）}/>
);
};

---

这在ReactJS中调用。

这两个组件都是在父组件中包装的，因此您可以在父组件中拥有状态，当单击时，您可以在那里执行逻辑并将该状态作为道具传递给另一个组件。。。我认为这样你就能做到。你能解释更多关于用例的内容吗？两个组件都包装在父组件中，因此你可以在父组件上拥有状态，当点击时，你可以在那里执行逻辑，并将该状态作为道具传递给另一个组件。。。我认为这样你就能做到。你能解释更多关于UseCase的内容吗？因为两个组件都在同一个组件中，你可以持有一个状态变量并使用该变量，这里是否需要使用ref…因为两个组件都在同一个组件中，你可以持有一个状态变量并使用该变量，这里是否需要使用ref。。。