处理在reactjs多个输入值

Question

我试图创建一个形式： 1）呈现的输入 2）使用该渲染从按下添加按钮 3）我想要的能力进一步更呈现初始字段集捕获用户输入相关的表格实例/关键字希望这是有道理的。

所以我的输出是这样的

{[ID：1，名称：XXX，量：400]，[ID：2，名称：XXX，量：400]}

代替

{名称：XXX，数量：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)