我有两个操作需要传递到 react.js 上的 onClick 按钮。但是当我这样做的时候，我没有得到它？有解决办法吗？

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>

所以当我点击用户详细信息按钮时，用户详细信息的模态将显示出来，同时，将隐藏以前的模态。但是我在用户详细信息的 onClick 上的多个操作中出错。我的编码方式是错误的吗？还是有其他方法可以做到？

Answer 1

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

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

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

我会这样做：

   // 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>
     );
   }

希望对您有所帮助 ;)！

我有两个操作需要传递到 react.js 上的 onClick 按钮。但是当我这样做的时候，我没有得到它？有解决办法吗？

I have two action need to pass in to my onClick button on react.js. But When I do, I fail to get it? is it any solution to solve it?

onclick

button

buttonclick

bootstrap-modal

reactjs