How to make handleChange(event) listen to 2 events at once?

Question

JavaScript

I can’t solve this problem myself - there is a field with validation and a checkbox and there is a handleChange for the box and validationState() for the field, if the field is valid and the checkbox is pressed, then the submit button becomes active.

handleChange(event) {
        this.setState(this.validationState());

        var checked = event.target.checked;
        var style = this.validationState();


        if(checked && (JSON.stringify(style)!=='{"style":"error"}')) {
            this.setState({
                disabled: false
            });
        } else {
            this.setState({
                disabled: true
            });
        }
    },

    validationState() {
        var mail = this.refs.mail.getValue();
        var style = "error";

        var re = /^(([^<>()[\]\.,;:\[email protected]\"]+(\.[^<>()[\]\.,;:\[email protected]\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\[email protected]\"]+\.)+[^<>()[\]\.,;:\[email protected]\"]{2,})$/i;

        if(!re.test(mail)){
            return{
                style
            }
        }else {
            style = null;
            return{
                style
            }
        }

    },

The form for which it is written is here:

<form>
                <Input type="text" label="Name" placeholder="Your Name" bsSize="large" />
                <Input type="text" ref="mail" label="Email" placeholder="Your Email" bsSize="large" bsStyle={this.state.style}
                       onChange={this.handleChange} hasFeedback/>
                <Input type="textarea" label="Massage" placeholder="Please tell me more" bsSize="large"/>

                <RulesAndConditions>Rules and Conditions</RulesAndConditions>
                <Input ref="MyCheckbox" onChange={this.handleChange} type="checkbox" label="Confirm" readOnly bsSize="large"/>

                <ButtonGroup vertical block>
                    <Button type="reset" bsStyle="warning" bsSize="large">Reset</Button>
                    <p/>
                    <Button ref="submitButton" type="submit" bsStyle="success" bsSize="large" disabled={this.state.disabled}
                           >Submit</Button>
                    <p/>
                    <Button onClick={this.props.onHide} bsStyle="danger" bsSize="large">Close</Button>
                </ButtonGroup>
            </form>

The problem is that if you enter a valid field after the checkbox has fired, the button does not become active, since the event is listened to only on the checkbox. How to solve such a problem?
Project on GitHub https://github.com/Antibioticvz/react-transform-bo... (/src/index.js)
PS I couldn't think of anything better than

var style = this.validationState();
        if(checked && (JSON.stringify(style)!=='{"style":"error"}')) {

how else can you check if styles match for validation?

Answer 1

...
handleChange(source, event){
   // source содержит имя элемента, сгенерировавшего событие: Comp1 или Comp2
   ...
}

render(){
   ...
  <OneComponent ... onSomeEvent={this.handleChange.bind(this, "Comp1"} />
  <OtherComponent ... onAnotherEvent={this.handleChange.bind(this, "Comp2"} />
   ...
}
...