无法使用 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
            }
        });

这里是 Component get 被它的父组件调用的地方 - 为简洁起见隔离：

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')
            );

这里是 console.log 我认为是在 NewCheckInput

中作为道具传递的状态对象

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;

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

下面是 parent

的代码

'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')
);

我从 "handle..." 开始，作为我的事件处理的前缀，以识别其他自定义事件
注意你如何通过 props 处理来自 child 的事件（也许这就是你感到困惑的地方？）

希望这些对您有所帮助。

编码愉快！

无法使用 linkedState 读取 reactJs 中的 null 值

cannot read value of null in reactJs with linkedState

javascript

reactjs