私はというフォームを作成しようとしていますreactjsで

Question

を複数の入力値の処理：私は能力にしたい追加ボタン 3を押してから、さらに多くのレンダリングにレンダリング入力 2）使用）の最初のフィールドセットをレンダリング） 1そのフォームインスタンス/キーの希望に合うようにユーザー入力をキャプチャしてください。

ので、私の出力は、この

ようなものである{[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)