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

Question

I am trying to create a form that: 1) render a initial fieldset of inputs 2) use that render to render further more from pressing the add button 3) I want the ability to capture the user inputs to be associated that form instance/key hope this make sense.

so my output is something like this

{[id:1,name:xxx, amount:400],[id:2,name:xxx, amount:400]}

instead of

{name:xxx, amount:400, name0:xxx, amount0:400}

Is the code best way to do this or I missing something? Any help will be great appreciated.

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;

Answer 1

You could implement a little code to accomplish this.. not sure where you'd want to put it.

Basically you iterate through the object of inputs, parse out the number to get the Id, and assign to a new array of objects indexed by that Id.

 var testInputs = {name: 'name', amount: 0, name1: 'name1', amount1: 1, name2: 'name2', amount2: 2} var result = [] for (var key in testInputs) { var field = key.replace(/\\d/,'') var id = key.match(/\\d/) id = id ? id[0] : 0 var newInput = {id: id} if (!result[id]) { result[id] = newInput } result[id][field] = testInputs[key] } console.log(result)