我有两个动作需要传递给我的 onClick 按钮 反应.js.但是当我这样做时，我没有得到它?有什么解决方案可以解决吗?

Question

请考虑以下代码：

<Modal.Footer>
<Button variant="danger" onClick={()=>{
{this.props.onHide};
{()=> this.setState({userDetailModalShow: true})};
}}>User Detail</Button>
<Button variant="danger" onClick={this.props.onHide}>close</Button>
</Modal.Footer>

因此，当我单击"用户详细信息按钮"时，将显示用户详细信息的模式，同时将隐藏以前的模式。但是我在单击用户详细信息时收到多个操作的错误。我的编码方式是错误的吗？还是有其他方法可以做到这一点？

Answer 1

我会这样做：

// use handler function is cleaner
handleClickUserDetail = (e) => {
e.persist(); // persist the event to send it to onHide if needed
e.preventDefault();
this.props.onHide(e); // send the event to onHide if needed
this.setState({ userDetailModalShow: true });
}
render() {
return (
<Modal.Footer>
<Button 
variant="danger" 
onClick={this.handleClickUserDetail}
>
User Detail
</Button>
<Button 
variant="danger" 
onClick={this.props.onHide}
>
close
</Button>
</Modal.Footer>
);
}

希望对;)有所帮助！

Answer 2

你试过吗？

<Modal.Footer>
<Button variant="danger" onClick={()=>{
this.props.onHide();
this.setState({userDetailModalShow: true});
}}>User Detail</Button>
<Button variant="danger" onClick={this.props.onHide}>close</Button>
</Modal.Footer>

Answer 3

你为什么不把它们放到一个函数中呢？

clickHandler = ()=>{
this.props.onHide();
this.setState({userDetailModalShow: true}
}

<Modal.Footer>
<Button variant="danger" onClick={()=>{()=> clickHandler()}}
}>User Detail</Button>
<Button variant="danger" onClick={this.props.onHide}>close</Button>
</Modal.Footer>

Answer 4

你应该像这样编写内联代码，因为可能存在语法和范围错误

onClick={() => { func1(); func2();}}