處理在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)