在React.js中处理多个输入值

我正在尝试创建一种表单：1）渲染输入的初始字段集2）使用该渲染通过按添加按钮来渲染更多内容3）我希望能够捕获与表单实例/键相关联的用户输入希望这有道理。

所以我的输出是这样的

{[id：1，name：xxx，数量：400]，[id：2，name：xxx，数量：400]}

代替

{name：xxx，amount：400，name0：xxx，amount0：400}

代码是执行此操作的最佳方法还是我遗漏了某些东西？任何帮助将不胜感激。

const propTypes = {
    name : PropTypes.string,
    onNumberChange : PropTypes.func,
    onTextChange: PropTypes.func,
    text : PropTypes.string,
    helpText : PropTypes.string,
    className : PropTypes.string,
    autoFocus : PropTypes.bool,
    options : PropTypes.array
}

class NumberTextInput extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            inputForm: [],
            fieldName : '',
            fieldValue : '',
            fields : {}
        }
    }

    /**
     * [handleChange description]
     * @param  {[type]} event [description]
     * @return {[type]}       [description]
     */
    handleChange(event) {

        const inputFields = this.state.fields // array of inputted fields

        inputFields[event.target.name] = event.target.value

        this.setState({
            fields : inputFields
        }, this.props.onTextChange.bind(null, inputFields));
    }


    /**
     * addForm 
     * @param {[type]} e [description]
     */
    addForm(e) {
        e.preventDefault();

        let currentOptions = this.state.inputForm;

        currentOptions.push({name:null})

        this.setState({inputForm : currentOptions})

    }

    /** [removeForm description] */
    removeForm(index) {

        let currentOptions = this.state.inputForm;

        currentOptions.splice(index,1);

        this.setState({inputForm : currentOptions})
    }


    /**
     * Renders out the different form input types associated with a question
     */
    inputRender(itemIndex) {

        // Checks if the itemIndex exists then a assign value this to output unique names
        // when added to the object, also meet accessibilty requirements of form
        let itemIncrement = itemIndex === undefined ? '' : itemIndex;

        return (

            <div>
            {this.props.options.map( (option, index) =>

                <div className="fieldset" key={option.Name}>
                <label htmlFor={option.Name+itemIncrement}>{option.Text}</label>        
                {(() => {
                        if (option.Type ==='textInput') {
                            return (
                                <FormInput 
                                    type="text" 
                                    onChange={this.handleChange.bind(this)} 
                                    id={option.Name+itemIncrement}
                                    name={option.Name+itemIncrement} 
                                    className={this.props.className} 
                                    placeholder="" 
                                    pattern="[a-zA-Z0-9]+"
                                    autoFocus={index === 0 ? true : false}
                                />

                            )

                        }
                        if(option.Type === 'numberInput') {
                            return (

                                <FormInput 
                                    type="number" 
                                    onChange={this.handleChange.bind(this)} 
                                    placeholder="£" 
                                    pattern="\d*" 
                                    id={option.Name+itemIncrement}
                                    name={option.Name+itemIncrement}
                                    className={this.props.className} 
                                    autoFocus={index === 0 ? true : false}
                                />
                            )
                        }
                })()}
                </div>
            )}
            </div>
        )
    }

/**
 * Renders the out the input form field each time the 'add another debt is clicked'
 * 
 */
renderForms() {

let itemIndex;

return(

    // define each row of input forms and get the index and pass to the inputRender
    // to track unique input form.
    this.state.inputForm.map((item, index) => {
        {itemIndex = index}
        return (
            <div key={index} className="well">

                {this.inputRender(itemIndex)}

                <a onClick={this.removeForm.bind(this, index)} className="remove-field remove">Remove</a>
            </div>

        )
    })

    )
}

/**
 * Render out the all the input forms
 * 
 */
render() {
        return (
            <div>

                <div className="well">
                    {this.inputRender()} 
                </div> 
                 {this.renderForms()}

                <Button 
                    text="Add another debt" 
                    className="btn-secondary plus-button-icon" 
                    onClick={this.addForm.bind(this)}
                    value="add" 
                />
            </div>
        );
    }
}

NumberTextInput.propTypes = propTypes;

export default NumberTextInput;