Как проверить checkbox в форме ReactJS?

Question

[Ninja Mate]

Задача сделать кнопку отправить не активной если не нажата галочка согласен.
Но как получить значение с чекбокса не пойму...

var MyContactForm = React.createClass({

    getInitialState() {
        return {
            disabled: true
        };
    },

    resetValidation() {
        this.setState({
            disabled: true
        });
    },

    validationState() {
        var checked = this.refs.input.checked(); //Пытаюсь проверить таким образом, но безуспешно, документации не обнаружил
    },

    handleChange() {
        this.setState( this.validationState() );
    },

   render: function() {
        return (
            <form>
                <Input type="text" label="Name" placeholder="Your Name" bsSize="large" />
                <Input type="email" label="Email" placeholder="Your Email" bsSize="large"/>
                <Input type="textarea" label="Massage" placeholder="Please tell me more" bsSize="large"/>

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

                <ButtonGroup vertical block>
                    <Button onClick={this.resetValidation} type="reset" bsStyle="warning" bsSize="large">Reset</Button>
                    <p/>
                    <Button 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>
        )
    }
});

Answer 1

[Алексей Зуев]

Пытаюсь проверить таким образом, но безуспешно, документации не обнаружил

А вы где ее искали? Refs to Components

onChange={this.handleChange()}

Вы на onChange хотите повесить результат вызова метода?

this.setState( this.validationState() );

А здесь вы какой стейт хотите проставить?

Если хотите через refs, то сначала сделайте привязку и тогда получите значение из свойства DOM элемента
к примеру так

<input ref="myCheckbox" ...

this.refs.myCheckbox.checked

Пример 1
Пример 2

Или используйте event в методе handleChange

handleChange(event) {
  var checked = event.target.checked;
}

Пример

Comments

[Ninja Mate]

Прошу прощение, поплыл окончательно...
Пробовал так:

getInitialState() {
        return {
            disabled: true
        };
    },

    resetValidation() {
        this.setState({
            disabled: true
        });
    },

    validationState() {
        var checked = this.refs.myCheckbox.checked;

        if(checked){
            disabled: false
        }
    },

    handleChange() {
        this.setState( this.validationState() );
    },

<form>
<Input ref="myCheckbox" type="checkbox" label="Confirm" readOnly onChange={this.handleChange()} bsSize="large"/>

<Button type="submit" bsStyle="success" bsSize="large" disabled={this.state.disabled}
                            onChange={this.handleChange()}>Submit</Button>
</form>

Вот такая ошибка.
TypeError: Cannot read property 'checked' of undefined
Я так понимаю, что ему 'checked' не нравится. В чем проблема

[Алексей Зуев]

Ninja Mate: во-первых, уберите () в onChange={this.handleChange()},

[Алексей Зуев]

Ninja Mate: Потом у меня еще внутри компонента Input есть ref

[Алексей Зуев]

Ninja Mate: validationState объект должен возвращать

[Ninja Mate]

Алексей Зуев: Так и не пойму двух моментов 1 почему на checked ругается? 2 куда ref от кнопки вставлять....

var MyContactForm = React.createClass({

    getInitialState() {
        return {
            disabled: true
        };
    },

    resetValidation() {
        this.setState({
            disabled: true
        });
    },

    validationState() {
        var checked = this.refs.myCheckbox.checked;

        if(checked){
            disabled: false
        }
            return { disabled };
    },

    handleChange() {
        this.setState( this.validationState() );
    },

    render: function() {
        return (
            <form>
                <Input type="text" label="Name" placeholder="Your Name" bsSize="large" />
                <Input type="email" label="Email" placeholder="Your Email" bsSize="large"/>
                <Input type="textarea" label="Massage" placeholder="Please tell me more" bsSize="large"/>

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

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

[Ninja Mate]

Алексей Зуев (не ту версию вставил) я вот так ссылаюсь, но не работает
var checked = this.refs.myCheckbox.refs.closeButton.checked;

[Ninja Mate]

Алексей Зуев: я вообще правильно ссылаюсь validationState() {
var checked = this.refs.myCheckbox.refs.closeButton.checked; ????

[Алексей Зуев]

Ninja Mate: пришлите мне минимальную сборку проекта на почту, я позже гляну

[Ninja Mate]

Алексей Зуев: Я вам на почту письмо кинул, посмотрите как будет время. я уверен что там какая-то мелочь, потому что просто не получается через реф указать на нужный элемент... Если кто то еще захочет взглянуть, то вот проект : https://github.com/Antibioticvz/react-transform-bo...

[Алексей Зуев]

Ninja Mate: Ответил на письмо