javascript - 无法使用 linkedState 读取 ReactJs 中的 null 值

Question

我正在尝试在 React 中创建一个复选框组件，因为我已经有四个复选框组件，并且可能会在以后添加更多组件，所以我认为使用 ReactLink 将有助于使代码不那么冗长。但是，我不断收到错误 Uncaught TypeError: Cannot read property 'false' of null

这是组件骨骼，请注意，我尚未处理更改 - 尝试一次处理一件事......

var NewCheckInput = React.createClass({

            mixins: [React.addons.LinkedStateMixin],
            render: function(){

                    var filter = this.props.listFilters;
                    var inputData = this;
                    console.log(filter);
                    console.log(this.props.inputValue);

                    var input = (<input
                        type="checkbox"
                        onChange={this.handleChange}
                        name={inputData.props.inputId}
                        checked={this.props.inputValue}
                        id={inputData.props.inputId}
                        checkedLink={this.linkState(filter.for_sale)} />);

                    var label = (
                        <label htmlFor={inputData.props.inputId}>
                            {inputData.props.inputName}
                        </label>);

                    if (this.props.inputLabel){

                    var inputSection = <section>{input} {label}</section>
                    } else {
                        var inputSection  = <section>{input}</section>
                    }

                return inputSection
            }
        });

这是组件被其父组件调用的地方 - 为简洁起见，将其隔离:

var ControllerForm = React.createClass({

            render: function(){
                var filter = this.props.listFilters;
                return (
                    <form>
                    <NewCheckInput
                        inputType="checkbox"
                        inputId="for-sale"
                        refs="for_sale"
                        inputName="For Sale (3+ Years)"
                        inputLabel ="true"
                        inputValue={filter.for_sale}
                        {...this.props} />

                    </form>
                    )
            }
        });

这是我设置状态的位置(在应用程序的根目录下):

var FilterGrid = React.createClass({
            mixins: [React.addons.LinkedStateMixin],
            getInitialState: function(){
                return {
                    search: '',
                    all: true,
                    for_sale: false,
                    zuchtstuten: false,
                    nachzucht: false
                }
            },

            render: function() {
                return (<section className="wrapper filter-grid">
                    <GridController listFilters={this.state} />
                    <GridList listFilters={this.state} items={horseArr} />
                    </section>)
                }
        });

        React.render(
            <FilterGrid/>,
            document.getElementById('filter-grid')
            );

这是我认为是作为 NewCheckInput 内的 props 传递的状态对象的 console.log

Object {search: "", all: true, for_sale: false, zuchtstuten: false, nachzucht: false}

如果这里发生了一些普遍的愚蠢编码，请原谅我，仍在研究最佳实践、正确模式等。

Answer 1

首先，引用来自 facebook 的 React:

If you're new to the framework, note that ReactLink is not needed for most applications and should be used cautiously.

所以我建议你不要使用linkState。 (由你决定)

这是检查组件的代码

'use strict';
var React = require('react');

var CheckBox = React.createClass({
    propTypes: {
        name                : React.PropTypes.string,
        checked             : React.PropTypes.bool,
        description         : React.PropTypes.string,
        checkStatusChanged  : React.PropTypes.func
    },
    getDefaultProps: function() {
        return {
            name                : '',
            checked             : false,
            description         : '',
            checkStatusChanged  : function() {}
        };
    },
    getInitialState: function() {
        return {
            checked: this.props.checked
        };
    },
    _handleCheckChanged: function(event) {
        this.props.checkStatusChanged(this.props.name, event.target.checked);
        this.setState({checked: event.target.checked});
    },
    render: function() {
        /* jshint ignore:start */
        return (
            <div>
                <label>
                  <input type="checkbox" onChange={this._handleCheckChanged} checked={this.state.checked} /> {this.props.description}
                </label>
            </div>
        );
        /* jshint ignore:end */
    }

});

module.exports = CheckBox;

1. 我总是在顶部声明我的 propType，以便于引用
2. 始终设置默认 Prop ，因为如果有人使用您的代码，他们可能会忘记设置 Prop 并在某处导致错误
3. 我使用 _(下划线)作为自定义函数来识别默认的 React js 函数

现在这是父级的代码

'use strict';

var React = require('react'),
    CheckBox = require('./components/check-box'),
    ExampleApp;

ExampleApp = React.createClass({
    _handleCheckStatusChanged: function(name, value) {
        console.log(name, value);
    },
    render: function() {
        return (
        	/*jshint ignore:start */
            <div>
            	<h2>Hello, World</h2>
                <CheckBox name="cb1" description="check me" checkStatusChanged={this._handleCheckStatusChanged} />
                <CheckBox name="cb2" description="check me" checkStatusChanged={this._handleCheckStatusChanged} checked={true} />
            </div>
            /*jshint ignore:end */
        );
    }
});

React.render(
    /*jshint ignore:start */
    <ExampleApp />,
    /*jshint ignore:end */
    document.getElementById('app')
);

1. 我以“handle...”开头，作为我的事件处理的前缀，以与其他自定义事件进行识别
2. 注意你如何通过 props 处理来自 child 的事件(也许这就是你感到困惑的地方？)

希望这些有帮助。

祝你编码愉快!