How to return an event from Button using react-bootstrap?

I have the following code:

class SelectorEdit extends React.Component {
    constructor(){
        super();
        this.state = {
            displayText: '',
            isEditing: false
        };
        this.renderList = this.renderList.bind(this);
        this.onSelectionHandle = this.onSelectionHandle.bind(this);
    }

    componentDidMount(){
        if(typeof this.props.val !== 'undefined' && typeof this.props.options !== 'undefined'){

            let result = this.props.options.find(x => x.value === this.props.val);
            const displayText = result.text;
            this.setState( {displayText} );
        }
    }

    onSelectionHandle = (e) => {
        console.log('key: ', e); //returns undefined for e
    }

    renderList(){
        if (typeof this.props.options === "undefined"){
            return;
        } else if(this.props.options){
            return this.props.options.map((option)=>{
                return(
                    <Button eventKey={option.value} onClick={this.onSelectionHandle}>{option.text}</Button>
                );
            });
        }

    }

    render(){
        return(
            <div className="display-choices">
                <ButtonGroup >{this.renderList()}</ButtonGroup>
            </div>
        )
    }
}export default SelectorEdit;

I am not sure why the event does not pass in this situation? Does react-bootstrap allow you to get the event on a button click? Their example in the documentation only gives a scenario to get the click, not to get the selected item in the click. Any advice?

1 answer

  • answered 2018-01-11 19:44 Eric Hasselbring

    You can do something like this rather than relying on the event. This can be refactored better but I am just trying to show the flow. Ultimately you could write the button as a pure component and handle the binding of the button text to the onSelectionHandle function.

        constructor(){
        super();
        this.state = {
            displayText: '',
            isEditing: false
        };
        this.renderList = this.renderList.bind(this);
        this.onSelectionHandle = this.onSelectionHandle.bind(this);
        this.bindSelectionHandle = this.bindSelectionHandle.bind(this);
    }
    
    onSelectionHandle( buttonText ) {
      console.log(buttonText); //returns button text clicked
    }
    
    bindSelectionHandle( buttonText ) {
      return onSelectionHandle.bind( this, buttonText )
    }
    
    renderList(){
      if (typeof this.props.options === "undefined"){
            return;
        } else if(this.props.options){
            return this.props.options.map((option)=>{
                return(
                    <Button eventKey={option.value} onClick={this.bindSelectionHandle( option.text ) }>{option.text}</Button>
                );
            });
        }
    
    }
    
    render(){
        return(
            <div className="display-choices">
                <ButtonGroup >{this.renderList()}</ButtonGroup>
            </div>
        )
    }