Reactjs 在React中处理大型表单的插件或模式？

我有一个包含许多输入的表单，我希望在我的状态下收集输入的值，而不必为每个输入定义

onChange

或自定义组件

React有一个官方的附加组件

LinkedStatesMixin

，似乎即将推出，只是部分解决方案（例如，缺少单选按钮组）：

同时，来自Angular和Ember的用于设置输入绑定的优雅简洁的API是前端框架中的必备功能

---

在不使用不推荐的

LinkedStatesMixin

的情况下，实现这一点的最有效方法是什么？

我们为此构建了自定义绑定。请看这里：

---

我们写的这篇文章还引用了ReactLink（），这可能是您在LinkedStatesMixin中使用的，但是文档中确实有一节介绍了如何在没有LinkedStatesMixin的情况下使用ReactLink，希望能有所帮助？

这是一种方法。这来自React.13.Common/FormInputs

jInput.js

    import React, {Component} from 'react';

    class JInputRender extends Component {
        binder(...methods) { methods.forEach( (method) => this[method] = this[method].bind(this) ); }

        render() {
            var inputSty = this.props.input.style ? this.props.input.style : {color: 'red'};
            var textValue = this.state.textValue;
            var colorValue = this.props.input.colorValue ? this.props.input.colorValue : '#1A3212';
            var checkedValue = (this.props.input.checkedValue != null) ? this.props.input.checkedValue : false;
            var numberValue = this.props.input.numberValue ? this.props.input.numberValue : 0;
            var radioValue = this.props.input.radioValue ? this.props.input.radioValue : '';
            var radioChecked = (this.props.input.radioChecked != null) ? this.props.input.radioChecked : false;
            var min = this.props.input.min ? this.props.input.min : 0;
            var max = this.props.input.max ? this.props.input.max : 100;
            var step = this.props.input.step ? this.props.input.step : 1;
            var inputType = this.props.input.type ? this.props.input.type : 'text';

            var returnRadio = (
                    <input
                        type={inputType}
                        ref='inputRef'
                        style={inputSty}
                        checked={radioChecked}
                        value={radioValue}
                        onChange={this.handleValueChange} />
                )

            var returnChecked = (
                    <input
                        type={inputType}
                        ref='inputRef'
                        style={inputSty}
                        checked={checkedValue}
                        onChange={this.handleCheckedChange} />
                )

            var returnColor = (
                    <input
                        type={inputType}
                        ref='inputRef'
                        style={inputSty}
                        value={colorValue}
                        onChange={this.handleValueChange} />
                )

            var returnNumber = (
                    <input
                        type={inputType}
                        ref='inputRef'
                        style={inputSty}
                        value={numberValue}
                        min={min} max={max} step={step}
                        onChange={this.handleValueChange} />
                )

            var returnText = (
                    <input
                        type={inputType}
                        ref='inputRef'
                        style={inputSty}
                        value={textValue}
                        onChange={this.handleTextValueChange} />
                )
            var returnIt;
            switch (inputType) {
                case 'checkbox': returnIt = returnChecked; break;
                case 'radio': returnIt = returnRadio; break;
                case 'color': returnIt = returnColor; break;
                case 'number':
                case 'range': returnIt = returnNumber; break;
                default: returnIt = returnText; break;
            }

            return (returnIt);
        }
    }

    export default class JInput extends JInputRender {
        constructor() {
          super();
            this.state = {textValue: ''};
          this.binder('handleCheckedChange', 'handleTextValueChange', 'handleValueChange');
        }

        componentDidMount() {
            if (this.props.input.textValue) this.setState({textValue: this.props.input.textValue});
            if (this.props.input.focus) React.findDOMNode(this.refs.inputRef).focus();
        }
        componentWillReceiveProps(nextProps) {
            if (nextProps.input.textValue && (this.state.textValue != nextProps.input.textValue))
                {this.setState({textValue: nextProps.input.textValue});}
        }
        handleCheckedChange(event) { this.props.handleChange(this.props.input.name, event.target.checked); }
        handleTextValueChange(event) {
            var newValue = event.target.value;
            this.setState({textValue: newValue});
            this.props.handleChange(this.props.input.name, newValue);
        }
        handleValueChange(event) { this.props.handleChange(this.props.input.name, event.target.value); }
    }

import React，{Component}来自'React'；
类扩展组件{
binder（…methods）{methods.forEach（（method）=>this[method]=this[method].bind（this））；}
render（）{
var inputSty=this.props.input.style？this.props.input.style:{color:'red'}；
var textValue=this.state.textValue；
var colorValue=this.props.input.colorValue？this.props.input.colorValue:“#1A3212”；
var checkedValue=（this.props.input.checkedValue！=null）？this.props.input.checkedValue:false；
var numberValue=this.props.input.numberValue？this.props.input.numberValue:0；
var radioValue=this.props.input.radioValue？this.props.input.radioValue:“”；
var radioChecked=（this.props.input.radioChecked！=null）？this.props.input.radioChecked:false；
var min=this.props.input.min？this.props.input.min:0；
var max=this.props.input.max？this.props.input.max:100；
var step=this.props.input.step？this.props.input.step:1；
var inputType=this.props.input.type？this.props.input.type:'text'；
var returnRadio=(
)
var returnChecked=(
)
var returnColor=(
)
var returnNumber=(
)
var returnText=(
)
var returnIt；
开关（输入类型）{
案例“checkbox”：returnIt=returnChecked；break；
案例“收音机”：returnIt=returnRadio；中断；
大小写“color”：returnIt=returnColor；break；
案件编号：
案例“范围”：returnIt=returnNumber；中断；
默认值：returnIt=returnText；中断；
}
return（returnIt）；
}
}
导出默认类JInput扩展JInputRender{
构造函数（）{
超级（）；
this.state={textValue:''}；
此.binder（'handleCheckedChange'，'handleTextValueChange'，'handleValueChange'）；
}
componentDidMount（）{
if（this.props.input.textValue）this.setState（{textValue:this.props.input.textValue}）；
if（this.props.input.focus）React.findDOMNode（this.refs.inputRef.focus（）；
}
组件将接收道具（下一步）{
if（nextrops.input.textValue&&（this.state.textValue！=nextrops.input.textValue））
{this.setState（{textValue:nextrops.input.textValue}）；}
}
handleCheckedChange（事件）{this.props.handleChange（this.props.input.name，event.target.checked）；}
handleTextValueChange（事件）{
var newValue=event.target.value；
this.setState（{textValue:newValue}）；
this.props.handleChange（this.props.input.name，newValue）；
}
handleValueChange（事件）{this.props.handleChange（this.props.input.name，event.target.value）；}
}

app.ctrl.js。跳过JRadioGroup的内容

    import React, {Component} from 'react';

    import Actions from './../flux/Actions';
    import JInput from './common/jInput';
    import JRadioGroup from './common/jRadioGroup';

    import BasicStore from './../flux/Basic.Store';

    var AppCtrlSty = {
        height: '100%',
        padding: '0 10px 0 0'
    }

    var checkBoxSty = {
        boxSizing: 'border-box',
        display: 'inline-block',
        lineHeight: '18px',
        marginLeft: '2px',
        outline: 'none',
        position: 'relative'
    };

    var radioSty = {color: "blue"}

    var input3Sty = {color: 'green'};

    var inputLabel = {margin: '0 5px'};

    var textInput1 = {name: 'text', type: 'text', textValue: '', focus: true};
    var checkInput1 = {name: 'checkbox', type: 'checkbox', style: checkBoxSty};
    var colorInput = {name: 'color', type: 'color'};
    var numberInput = {name: 'number', type: 'number', min: 0, max: 100};
    var rangeInput = {name: 'range', type: 'range', min: 0, max: 100};

    var radioInput1 = {name: 'radioGroup', type: 'radio', radioValue: 'set'};
    var radioInput2 = {name: 'radioGroup', type: 'radio', radioValue: 'setkey'};
    var radioInput3 = {name: 'radioGroup', type: 'radio', radioValue: 'key'};

    class AppCtrlRender extends Component {
        binder(...methods) { methods.forEach( (method) => this[method] = this[method].bind(this) ); }

        render() {
            var inputData = this.state.data;

            textInput1.textValue = inputData.text;
            checkInput1.checkedValue = inputData.checkbox;
            colorInput.colorValue = inputData.color;
            numberInput.numberValue = inputData.number;
            rangeInput.numberValue = inputData.range;

            radioInput1.radioChecked = inputData.radioGroup == 'set';
            radioInput2.radioChecked = inputData.radioGroup == 'setkey';
            radioInput3.radioChecked = inputData.radioGroup == 'key';

            var selected = inputData.checkbox ? 'true' : 'false';
            var radioGroupName1 = 'key1'; //must be distinct for each use of JRadioGroup
            var radioValue = inputData.radioGroup;
            return (
                <div id='AppCtrlSty' style={AppCtrlSty}>
                    React 1.3 Form input<br/><br/>
                    Text: <JInput input={textInput1} handleChange={this.handleValueChange} /><br/><br/>
                    Checkbox: <JInput input={checkInput1} handleChange={this.handleValueChange} /> Value: {selected}<br/><br/>
                    Color: <JInput input={colorInput} handleChange={this.handleValueChange} /> Value: {colorInput.colorValue}<br/><br/>
                    Number: <JInput input={numberInput} handleChange={this.handleValueChange} /> Value: {numberInput.numberValue}<br/><br/>
                    Range: <JInput input={rangeInput} handleChange={this.handleValueChange} /> Value: {rangeInput.numberValue}<br/><br/>
              <JRadioGroup name={radioGroupName1} value={radioValue} ref="keyGroup" onChange={this.handleRadioChange}>
                <div>Radio Group:
                  <label id='inputLabel1' style={inputLabel}>
                    <input type="radio" value="set" /> Set
                  </label>
                  <label id='inputLabel2' style={inputLabel}>
                    <input type="radio" value="setkey"/> Set/Key
                  </label>
                  <label id='inputLabel3' style={inputLabel}>
                    <input type="radio" value="key"/> Key
                  </label>
                </div>
              </JRadioGroup><br/><br/>

                    Radio Input: &nbsp;
                    <JInput input={radioInput1} handleChange={this.handleValueChange} /> Set &nbsp;
                    <JInput input={radioInput2} handleChange={this.handleValueChange} /> Set/Key &nbsp;
                    <JInput input={radioInput3} handleChange={this.handleValueChange} /> Key &nbsp;
                    Value: {radioValue}
                </div>
            );
        }
    }

    function getState() { return {data: BasicStore.getData()}; };

    export default class AppCtrl extends AppCtrlRender {
        constructor() {
          super();
            this.state = getState();
          this.binder('storeDidChange', 'handleValueChange', 'handleRadioChange');
        }

        componentDidMount() {
            this.unsubscribe = BasicStore.listen(this.storeDidChange);
        }
        componentWillUnmount() { this.unsubscribe(); }
        storeDidChange() { this.setState(getState()); }
      handleRadioChange(event) { Actions.editRecord('type', event.target.value); }
        handleValueChange(name, value) { Actions.editRecord(name, value); }
    }

import React，{Component}来自'React'；
从“/../flux/Actions”导入操作；
从“./common/JInput”导入JInput；
从“./common/JRadioGroup”导入JRadioGroup；
从“/../flux/Basic.Store”导入BasicStore；
var AppCtrlSty={
高度：“100%”，
填充：“0 10px 0”
}
var checkBoxSty={
框大小：“边框框”，
显示：“内联块”，
线宽：“18px”，
marginLeft:'2px'，
大纲：“无”，
位置：'相对'
};
var光能传递={color:“blue”}
var input3Sty={color:'green'}；
var inputLabel={margin:'0 5px'}；
var textInput1={name:'text'，type:'text'，textValue:''，focus:true}；
var checkInput1={name:'checkbox'，type:'checkbox'，style:checkBoxSty}；
var colorInput={name:'color'，type:'color'}；
var numberInput={name:'number'，type:'number'，min:0，max:100}；
var rangeInput={name:'range'，type:'range'，min:0，max:100}；
var radioInput1={name:'radioGroup'，type:'radio'，radioValue:'set'}；
var radioInput2={name:'radioGroup'，type:'radio'，radioValue:'setkey'}；
var radioInput3={name:'radioGroup'，type:'radio'，radioValue:'key'}；
类AppCtrlRender扩展组件{
binder（…methods）{methods.forEach（（method）=>this[method]=this[method].bind（this））；}
render（）{
var inputData=this.state.data；
textInput1.textValue=inputData.text；
checkInput1.checkedValue=inputData.checkbox；
colorInput.colorValue=inputData.color；
numberInput.numberValue=inputData.number；
rangeInput.numberValue=inputData.range；
放射性输入1.radi