單擊按鈕時添加輸入字段

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> 
     ); 
    } 
} 

如何創建新的動態（不同的裁判爲新創建的輸入框）爲原料輸入欄點擊按鈕時？

Answer 1

在你的情況我會做輸入像

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回調，則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