Question

我正在尝试创建一个表单： 1）渲染输入的初始字段集 2）使用该渲染来按下添加按钮以进一步渲染 3）我希望能够捕获与表单实例/密钥相关联的用户输入，希望这是有意义的。

所以我的输出是这样的

{[id：1，姓名：xxx，金额：400]，[id：2，姓名：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;

Answer 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)

处理reactjs中的多个输入值

1 个答案: