单击按钮时添加输入字段

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