Как сделать handleChange(event) который слушает сразу 2 события?

Question

[Ninja Mate]

Не могу решить сам вот такую задачу - есть поле с валидацией и чекбокс и есть handleChange для бокса и validationState() для поля, если поле валидное и чек бокс нажали, то кнопка отправить становится активной.

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 = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

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

    },

Форма для которой это прописывается вот :

<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>

Проблема в том, что если ввести валидное поле после того как сработал чек бокс, то кнопка не становится активной, так как слушается событие только на чек боксе. Как решить такую задачу?
Проетк на GitHub https://github.com/Antibioticvz/react-transform-bo... (/src/index.js)

PS Не придумал ничего лучше чем

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

как еще можно проверить соответствие стилей для валидации?

Answer 1

[Roman_Kh]

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

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

Comments

[Ninja Mate]

Их же нужно было два сделать handleChange? если да, то я где то ошибся и чек бокс теперь не влияет на кнопку

handleChange(CheckConfirm, event) {

        var checked = event.target.checked;

        if(checked) {
            this.setState({
                disabled: false
            });
        } else {
            this.setState({
                disabled: true
            });
        }
    },

    handleChange(InputMail) {

        var style = this.validationState();

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

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

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

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

    },

    render() {
        return (
            <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.bind(this, "InputMail")} hasFeedback/>
                <Input type="textarea" label="Massage" placeholder="Please tell me more" bsSize="large"/>

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

                <ButtonGroup vertical block>
                    <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>
        )
    }
});

[Ninja Mate]

Ninja Mate: судя по тестам handleChange(source, event) вообще игнорит на какой сорс я ссылаюсь. Как у меня так получилось?

[Roman_Kh]

handleChange должен быть один, причем тело функции надо, конечно же, изменить.
Например, event.target.checked можно использовать только когда handleChange вызвана для чекбокса, но не когда она вызвана для строки ввода.
Проще говоря, в handleChange сначала надо проверить, для какого контрола она была вызвана, после чего уже немного по-разному обрабатывать чекбокс и строку ввода, чтобы разобраться нужно ли дизейблить или, наоборот, энейблить кнопку.

[Ninja Mate]

Roman_Kh: а можете подсказать где то пример найти (сам не смог)? для handleChange(source, event), не ясно как source задавать для выполнения конкретной функции (проверка через if()?)

[Roman_Kh]

source - это просто переменная, которой можно присвоить любое значение. А в самой функции вы его можете, например, через if проверять или через switch.
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Ninja Mate]

Roman_Kh: у меня теперь другая проблема, не могу задать флаг (контрольную переменную), получается, что с каждым новым действием переменные создаются снова. Можете что то посоветовать?

handleChange(source, event) {
        var inputFlag;
        var checkFlag;
        var checked = event.target.checked;

        if(source == "CheckConfirm") {

            if (checked) {
                checkFlag = true;
            }else {
                checkFlag = false;
            }
        }

        if(source == "InputMail") {

            var style = this.validationState();

            if (JSON.stringify(style) !== '{"style":"error"}') {
                this.setState(this.validationState());
                inputFlag = true;

            } else {

                this.setState(this.validationState());
                inputFlag = false;
            }
        }
        console.log(inputFlag +" and "+  checkFlag);
        if(inputFlag && checkFlag){
            console.log('оба флага вверх');
            this.setState({
                disabled: false
            });
        } else {
            this.setState({
                disabled: true
            });
        }
    },

[Roman_Kh]

Ваш validationState должен возвращать только true или false в зависимости от того пройдена проверка или нет.
А в handleChange вы как раз должны проверять состояние ваших компонентов и validationState, а затем принимать решение, актировать кнопку или дизейблить.

[Ninja Mate]

Roman_Kh: Следуя вашим советам получил вот такое решение

handleChange() {
        var valid = this.validationState();

            if (valid) {
                this.setState({
                    disabled: false
                });
            } else {
                this.setState({
                    disabled: true
                });
            }
    },

    /* Antibiotic 26.01.2016
     * function to validate email input
     */
    validationState() {
        var mail = this.refs.mail.getValue();
        var checked = this.refs.MyCheckbox.getChecked();
        var condition;

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

        if (!re.test(mail)) {
            this.setState({
                style: "error"
            });
        }else {
            this.setState({
                style: null
            });
        }

        if(re.test(mail) && checked ){
            condition = true;
            return condition
        }else {
            condition = false;
            return condition
        }
    },

Все работает как и задумывалось и без загрузки handleChange разными событиями, а все через валидацию.
Буду рад любым замечаниям к коду (понимаю что корявый, но не до красоты уже)