Обработка нескольких входных значений в reactjs

Я пытаюсь создать форму, которая:
1) отрисовка начального набора входных данных
2) Используйте этот рендер для рендеринга дальше от нажатия кнопки Добавить
3) я хочу, чтобы возможность захвата пользовательских входов была связана с тем, что экземпляр формы/ключ надеются, что это имеет смысл.

так что мой выход что-то вроде этого

{[id:1, name:xxx, amount:400], [id:2, name: xxx, amount: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;

1 ответ

  1. Для этого можно реализовать небольшой код.. не уверен, куда вы хотите положить его.

    В основном вы перебираете объект входных данных, анализируете номер, чтобы получить Id, и назначаете новый массив объектов, индексированных этим 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)