通过继承React.js中的值来更改复选框的值

时间:2015-12-03 13:05:26

标签: javascript inheritance reactjs

我试图熟悉react.js中组件之间的继承是如何工作的,我有点麻烦。

要求 - 基本上,我想要实现的是当我点击按钮时我的复选框的值会发生变化。

复选框继承'checkedVal'的值,该值在标题中设置为状态。

我可以在第一次加载时在复选框中获得正确的值,但是当我点击按钮时无法更改它。任何想法都会受到赞赏吗?

var Heading = React.createClass({
propTypes: {
    name: React.PropTypes.string,
    age: React.PropTypes.number
},
getDefaultProps: function(){
    return {
        name: 'Keir',
        age: 24,
    }
},
getInitialState: function(){
    return {
        manU: false,
        checkedVal: false
    }
},
manUFan: function(){
    this.setState(function(previousState, currentProps){
        return {
            manU: !previousState.manU,
            checkedVal: !previousState.checkedVal
        }
    });
},
render: function(){
    var msg;
    if(this.state.manU){
        msg = "I am a United fan."   
    } else {
        msg = "I dream of being a united fan."   
    }
    return (
        <div>
            <h1>Attempting React</h1>
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.age}</li>
            </ul>
            <button onClick={this.manUFan}>Do You Support Man U?</button>
            <CheckBox checkBoxVal={this.state.checkedVal}/>
            <p>{msg}</p>
        </div>
        )
}
});

var CheckBox = React.createClass({
    propTypes: {
        checkBoxVal: React.PropTypes.bool  
    },
    render: function(){
        return (
            <div>
                <input type="checkbox" defaultChecked={this.props.checkBoxVal}/>
            </div>
            )
    }
    });


ReactDOM.render(<Heading />, document.getElementById('content'));

1 个答案:

答案 0 :(得分:1)

  

defaultValue和defaultChecked道具仅在初始渲染期间使用。如果需要更新后续渲染中的值,则需要使用受控组件。 https://facebook.github.io/react/docs/forms.html#controlled-components

因此,在您的情况下,您将如何实施受控CheckBox

var Heading = React.createClass({
...
    getInitialState: function(){
        return {
            checkedVal: false
        }
    },

    handleChange: function(event){
        this.setState({checkedVal: event.target.value});
    },

    render: function(){
        ...
        return (
            <div>
                ...
                <CheckBox onChange={this.handleChange} checkBoxVal={this.state.checkedVal}/>
                ...
            </div>
        );
    }
});

var CheckBox = React.createClass({
    propTypes: {
        checkBoxVal: React.PropTypes.bool  
    },

    render: function(){
        return (
            <div>
                <input type="checkbox" onChange={this.props.onChange} value={this.props.checkBoxVal}/>
            </div>
        );
    }
});