Change:
When using ReactLink with checkboxes or dropdowns, the state should not be bound to 'value', but to 'checked' and 'selected' instead.
I guess it's not obvious what the API should be here. I suppose the most obvious way is to do but keep as-is (and should still not work). Any opinions?
Either or change to do the same thing as ?

Discussion:
'radio': true }; <del> function _assertLink(input) { </del> <ins> function _assertSingleLink(input) { invariant( input.props.checkedLink == null || input.props.valueLink == null, 'Cannot provide a checkedLink and a valueLink. If you want to use ' + 'checkedLink, you probably don't want to use valueLink and vice versa.' ); } function _assertValueLink(input) { _assertSingleLink(input); </ins> invariant( input.props.value == null && input.props.onChange == null, 'Cannot provide a valueLink and a value or onChange event. If you want ' +

); } <ins> function _assertCheckedLink(input) { _assertSingleLink(input); invariant( input.props.checked == null && input.props.onChange == null, 'Cannot provide a checkedLink and a checked property or onChange event. ' + 'If you want to use checked or onChange, you probably don't want to ' + 'use checkedLink' ); } </ins> /** * @param {SyntheticEvent} e change event to handle */

} /** <ins> * @param {SyntheticEvent} e change event to handle */ function _handleLinkedCheckChange(e) { /*jshint validthis:true */ this.props.checkedLink.requestChange(e.target.checked); } /** </ins> * Provide a linked `value` attribute for controlled forms. You should not use * this outside of the ReactDOM controlled form components. */

); } } <ins> }, checked: function(props, propName, componentName) { if (__DEV__) { if (props[propName] && !props.onChange && !props.readOnly && !props.disabled) { console.warn( 'You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.' ); } } </ins> } } },

*/ getValue: function(input) { if (input.props.valueLink) { <del> _assertLink(input); </del> <ins> _assertValueLink(input); </ins> return input.props.valueLink.value; } return input.props.value;

/** * @param {ReactComponent} input Form component <ins> * @return {*} current checked status of the input either from checked prop *             or link. */ getChecked: function(input) { if (input.props.checkedLink) { _assertCheckedLink(input); return input.props.checkedLink.value; } return input.props.checked; }, /** * @param {ReactComponent} input Form component </ins> * @return {function} change callback either from onChange prop or link. */ getOnChange: function(input) { if (input.props.valueLink) { <del> _assertLink(input); </del> <ins> _assertValueLink(input); </ins> return _handleLinkedValueChange; <ins> } else if (input.props.checkedLink) { _assertCheckedLink(input); return _handleLinkedCheckChange; </ins> } return input.props.onChange; }

props.defaultChecked = null; props.defaultValue = null; <del> props.checked = this.props.checked != null ? this.props.checked : this.state.checked; </del> var value = LinkedValueUtils.getValue(this); props.value = value != null ? value : this.state.value; <ins> var checked = LinkedValueUtils.getChecked(this); props.checked = checked != null ? checked : this.state.checked; </ins> props.onChange = this._handleChange; return input(props, this.props.children);

expect(React.renderComponent.bind(React, instance, node)).toThrow(); }); <ins> it('should support checkedLink', function() { var container = document.createElement('div'); var link = new ReactLink(true, mocks.getMockFunction()); var instance = <input type="checkbox" checkedLink={link} />; React.renderComponent(instance, container); expect(instance.getDOMNode().checked).toBe(true); expect(link.value).toBe(true); expect(link.requestChange.mock.calls.length).toBe(0); instance.getDOMNode().checked = false; ReactTestUtils.Simulate.click(instance.getDOMNode()); expect(link.requestChange.mock.calls.length).toBe(1); expect(link.requestChange.mock.calls[0][0]).toEqual(false); }); it('should warn with checked and no onChange handler', function() { var oldWarn = console.warn; try { console.warn = mocks.getMockFunction(); var node = document.createElement('div'); var link = new ReactLink(true, mocks.getMockFunction()); React.renderComponent(<input type="checkbox" checkedLink={link} />, node); expect(console.warn.mock.calls.length).toBe(0); React.renderComponent( <input type="checkbox" checked="false" onChange={mocks.getMockFunction()} />, node ); expect(console.warn.mock.calls.length).toBe(0); React.renderComponent( <input type="checkbox" checked="false" readOnly={true} />, node ); expect(console.warn.mock.calls.length).toBe(0); React.renderComponent(<input type="checkbox" checked="false" />, node); expect(console.warn.mock.calls.length).toBe(1); React.renderComponent( <input type="checkbox" checked="false" readOnly={false} />, node ); expect(console.warn.mock.calls.length).toBe(2); } finally { console.warn = oldWarn; } }); it('should throw if both checked and checkedLink are provided', function() { // Silences console.error messages // ReactErrorUtils.guard is applied to all methods of a React component // and calls console.error in __DEV__ (true for test environment) spyOn(console, 'error'); var node = document.createElement('div'); var link = new ReactLink(true, mocks.getMockFunction()); var instance = <input type="checkbox" checkedLink={link} />; expect(React.renderComponent.bind(React, instance, node)).not.toThrow(); instance = <input type="checkbox" checkedLink={link} checked="false" />; expect(React.renderComponent.bind(React, instance, node)).toThrow(); instance = <input type="checkbox" checkedLink={link} onChange={emptyFunction} />; expect(React.renderComponent.bind(React, instance, node)).toThrow(); }); it('should throw if both checkedLink and valueLink are provided', function() { // Silences console.error messages // ReactErrorUtils.guard is applied to all methods of a React component // and calls console.error in __DEV__ (true for test environment) spyOn(console, 'error'); var node = document.createElement('div'); var link = new ReactLink(true, mocks.getMockFunction()); var instance = <input type="checkbox" checkedLink={link} />; expect(React.renderComponent.bind(React, instance, node)).not.toThrow(); instance = <input type="checkbox" valueLink={link} />; expect(React.renderComponent.bind(React, instance, node)).not.toThrow(); instance = <input type="checkbox" checkedLink={link} valueLink={emptyFunction} />; expect(React.renderComponent.bind(React, instance, node)).toThrow(); }); </ins> });