0

checkedReact コンポーネントのチェックボックスのステータスを見つけようとしています。これは私のコンポーネントです:

class Checkboxes extends React.Component {
     constructor() {
        super();
        console.log('Hello world!');
        this.state = {
            filterEnabled: {
                'desserts': true,
                'juices': true,
                'meats': true,
                'veggies': true,
            },
            isApplyingFilter: false
        };
    }

    getInitialState () {
        return {
            filterEnabled: {
                'desserts': true,
                'juices': true,
                'meats': true,
                'veggies': true
            },
            isApplyingFilter: false
        };
    }

    render () {
        const { isApplyingFilter } = this.props;
        return (
            <div>
                <div className="row">
                    <div className="col-md-12">
                        <div className="mt-checkbox-inline">
                            <label className="mt-checkbox">
                                <input type="checkbox" name="desserts" value="desserts" 
                                    checked={this.state.filterEnabled.desserts}
                                /> 
                                <span>desserts</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="juices" value="juices" 
                                    checked={this.state.filterEnabled.juices}
                                /> 
                                <span>juices</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="meats" value="meats" 
                                    checked={this.state.filterEnabled.meats}
                                /> 
                                <span>meats</span>
                            </label>
                            <label className="mt-checkbox">
                                <input type="checkbox" name="veggies" value="veggies" 
                                    checked={this.state.filterEnabled.veggies}
                                /> 
                                <span>veggies</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

次のテスト シナリオを作成しました。

it('Applying "foods" filter will display only selected food items.', () => {
    // Locate the checkboxes div 
    var checkboxes = TestUtils.scryRenderedDOMComponentsWithTag(DOM, 'input');
    // Pick the first checkbox
    var cb = checkboxes[0].attributes;
    // prints out "desserts"
    console.log('name: ', cb['name'].value);
    // prints out an empty string
    console.log('checked: ', cb['checked'].value);
});

の値を取得しようとするとcb['checked']、単に空の文字列が出力されます''。私はtrue代わりに得ることを期待しています。

チェックボックスの状態を取得する正しい方法は何ですか?

4

1 に答える 1

0

checked を と等しくなるように設定したのでthis.state.filterEnabled、状態をチェックするだけで十分です。

expect(this.state.filterEnabled.desserts).toBe(true);
于 2016-07-11T14:23:12.623 に答える