Javascript 如何在custome组件上更新我的ref onClick？

我试图做的是使用我的子组件的状态，它是一个按钮。单击“我的子组件”时，其状态将发生更改。所以我从ref中得到了它在父对象中的状态，现在我尝试使用ref

（最终目标是做点什么链接

孩子的状态？：

*如您所见，我尝试了一些解决方案，但迄今为止没有一个有效：/

父组件

导出默认类聊天扩展组件{
建造师（道具）{
超级（道具）；
this.BtnRef=React.createRef（）；
}
componentDidMount（）{
const RefBtn=this.BtnRef.current.state；
this.setState（{RefBtn:RefBtn}）
}
componentDidUpdate（）{
console.log（this.state.RefBtn）
this.setState（{RefBtn:RefBtn}）
}
handleEvent=（）=>{
this.setState（{RefBtn:RefBtn}）
};
render（）{
返回(
好啊
);
}
}

子组件

导出默认类ChatButton扩展组件{
状态={
活动：错误，
}
getInitialState（）{
返回{“showHideSidenav”：“hidden”}；
}
render（）{
const{onPress}=this.props；
设a=(
)
设b=(
)
返回(
{
this.setState（{active:！this.state.active}）；
onPress（）；
}} >
{this.state.active？b:a}
);
}
toggleChat（）{
var css=（this.state.showHideSidenav==“隐藏”）？“显示”：“隐藏”；
this.setState（{“showHideSidenav”：css}）；
}
}

要解决此问题，您不需要使用refs，只需从子组件触发事件，就像您已经做的那样。 父组件将有其状态，如下所示：

state = {
  visible: false
}

您还需要为事件添加处理程序：

handleToggle = () => {
  this.setState(visible => ({ visible: !visible }));
}

<ChatButton onPress={this.handleToggle} />

handleToggle=（）=>{
this.setState（visible=>（{visible:！visible}））；
}

最后将状态传递给孩子：

<ChatButton onPress={this.handleToggle} active={this.state.visible} />

因此，在child中，您可以切换JSX

---

一个提示：不要使用refs，在大多数情况下，你不需要它，试着找到没有refs的方法来做一些事情。refs通常很难调试

为什么不将状态移动到父级并将其作为道具传递给子级，然后让子级根据道具呈现自己？你似乎是个概念。你需要的是。示例代码：

handleToggle = () => {
  this.setState(visible => ({ visible: !visible }));
}

<ChatButton onPress={this.handleToggle} />

<ChatButton onPress={this.handleToggle} active={this.state.visible} />