在 react-bootstrap 按钮中将多个操作传递给 onClick 事件

Question

Consider a react/redux application with react-bootstrap components.

This may be a very rookie question, but I am trying to pass multiple actions to a single onClick event on a Button from a react-bootstrap library.

<Button bsStyle="success" bsSize="small" onClick={someCallback; someOtherCallback;}>
  Something
</Button>

How to do this properly?

Answer 1

Wrap them in another function:

<Button bsStyle="success" bsSize="small" onClick={onButtonClick}>
  Something
</Button>
...
onButtonClick = function(event){
  someCallback()
  someOtherCallback()
}

Answer 2

You can use the following code to do more than one thing when the button is fired

 function doMagic { //do something //do another thing }

 <Button bsStyle="success" bsSize="small" onClick="doMagic()"> Something </Button>

Answer 3

I had a similar issue with my application (using React JS + Bootstrap 5). I wanted to use onClick to call an API (searchDataRange) and also to render a section of my page (const [renderItems, setRenderItems] = useState(false);)

.

I first tried this ( DID NOT WORK! ):

 <Button type="button" 
             className="btn btn-light mx-2"
             onClick={() => setRenderItems(!renderItems); searchDataRange} </Button>

I tried a few different combos with (), {}, etc.. but this solved the issue( SOLUTION ):

  const trigger = () => {
    setRenderItems(!renderItems);
    searchDateRange();
 }

return(

 <Button type="button" 
             className="btn btn-light mx-2"
             onClick={trigger}>Search</Button>
             
            </div> ...

Answer 4

I think there's OnClickCapture as well that works for a secondary Click Event. Probably not the most efficient way, but I think it works in the meantime if you use Onclick for the first function and OnclickCapture for the second function.