ボタンをクリックすると入力フィールドが追加されます

Question

成分ボタンがあるレシピを追加するためのフォームがあります。レシピには多くの成分が含まれています。そのボタンをクリックすると、成分ボタンの下に成分を追加する入力フィールドが表示されます。私は何をしようとしたのですか？

import Input from './Input.jsx'; 

export default class Sell extends Component { 
    constructor() 
    { 
     super(); 
     this.state = { 
      inputValues : {} 
     } 
     this.onHandleSubmit =this.onHandleSubmit.bind(this); 
    } 

    onChange(name, { target : { value } }) 
    { 
     const inputValues = this.state.inputValues; 
     inputValues[name] = value; 
     this.setState({ inputValues }) 
    } 

    onHandleSubmit() 
    { 
     console.log('clicked'); 
     const name = `ingrediant-${Object.keys(this.state.inputValues).length}`; 
     let inputbox = <Input name={ name } 
           onChange={ this.onChange.bind(this, name)} /> 

    } 

    onSubmit(event){ 
     event.preventDefault(); 
    } 

    render() { 
     return (
      <div className="row"> 
       <h2 className="flow-text text-center">Add Recipe</h2> 
       <form onSubmit={this.onSubmit} className="col offset-s4 s4"> 
        <div className="row"> 
        <div className="input-field col s12"> 
         <input ref="name" id="name" type="text" className="validate flow-text" /> 
         <label htmlFor="name">Name of Recipe</label> 
        </div> 
        </div> 
        <div className="input-field col s12"> 
         <a onClick={this.onHandleSubmit} className="waves-effect waves-light btn btn-block"><i className="material-icons right">add</i>Ingredients</a> 
        </div> 
        </div> 
        {this.state.inputValues} 
        <div className="row"> 
        <button className="waves-effect waves-light btn btn-block">Submit</button> 
        </div> 
       </form> 
      </div> 
     ); 
    } 
} 

ボタンがクリックされたときにどのように私は、食材用の新しい動的（新たに作成された入力ボックスの異なるREF）入力フィールドを作成することができますか？私は

class Input extends Component 
{ 

    render() 
    { 
     const { name, onChange } = this.props; 
     return(<div className="row"> 
       <div className="input-field col s12"> 
        <input id={name} 
         type="text" 
         className="validate flow-text" 
         onChange={ this.props.onChange } /> 
        <label htmlFor={name}>Name of Recipe</label> 
       </div> 
     </div>) 
    } 

} 

のような独立したコンポーネント入力を行うとSellコンポーネントからのonChangeコールバックを渡すあなたの場合

Answer 1

、Sellコンポーネントは、入力の値を維持し、あなたが送信する場合あなたが持っているサーバの値をその状態にします。何かのように：あなたはいけない、その場合には

class Sell extends Component 
{ 
    constructor() 
    { 
     super(); 
     this.state = { 
      inputValues = {}, 
      inputs : [] 
     } 
    } 

    onChange(name, { target : { value } }) 
    { 
     const inputValues = this.state.inputValues; 
     inputValues[name] = value; 
     this.setState({ inputValues }) 
    } 

    onHandleSubmit() 
    { 
     const name = `incrediant-${this.state.inputs.length}`; 
     let inputbox = <Input name={ name } 
           key={this.state.inputs.length} 
           onChange={ this.onChange.bind(this, name)} /> 

     const inputs = this.state.inputs; 
     inputs.push(inputbox); 
     this.setState({ inputs }); 

    } 

    ... 
    .... 

    render() 
    { 
     ... 
     ... 
     { 
      this.state.inputs.map(i => i); 
     } 
    } 

} 

あなたが参照を必要とする理由refs