ReactJS hinzufügen mehrere Eingabefelder dynamisch

Question

Hallo Ich bin neu in Reagieren und bin verloren zu versuchen, herauszufinden, wie Eingabefeld dynamisch mit React hinzufügen. Wenn jemand mir helfen kann, herauszufinden, wie man einen OnClick bindet, um ein weiteres Feld dynamisch zum Formular hinzuzufügen. Wie kann ich Mittel hinzufügen und eine weitere Option Eingang wird

class AddPost extends Component { 
    static contextTypes = { 
      router: React.PropTypes.object 
}; 

    appendInput() { 
     var newInput = `input-${this.state.inputs.length}`; 
     this.setState({ inputs: this.state.inputs.concat([newInput]) }); 
    } 

handleFormSubmit(formProps){ 
this.props.addPost(formProps); 
this.context.router.push('/posts'); 
} 
    render(){ 
     const {handleSubmit,fields:{title,option}} = this.props; 
     return (
      <div className="row top-buffer"> 
      <div className="col md-auto"> 
       <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
       <fieldset className="form-group"> 
        <label>Question:</label> 
        <input {...title} className="form-control" placeholder="Enter question here"/> 
        {title.touched && title.error && <div className="text-danger">{title.error}</div>} 
        </fieldset> 
       <fieldset className="form-group"> 
        <label>Option:</label> 
        <input {...option} className="form-control" placeholder="Enter option"/> 
        {option.touched && option.error && <div className="text-danger">{option.error}</div>} 
       </fieldset> 
        <fieldset className="form-group"> 
         <label>Option:</label> 
         <input {...option} className="form-control" placeholder="Enter option"/> 
         {option.touched && option.error && <div className="text-danger">{option.error}</div>} 
        </fieldset> 
       <button className="btn btn-success">Add</button> 
       </form> 
       <button onClick={() => this.appendInput() }> 
        CLICK ME TO ADD AN INPUT 
       </button> 
      </div> 
      </div> 
     ); 

    } 

} 

function validate(formProps){ 
const errors = {}; 
if(! formProps.title){ 
errors.title = "Title is required"; 
} 
if(! formProps.option){ 
    errors.body = "Option is required"; 
} 
return errors; 
} 

function mapStateToProps(state){ 
    return { 
    posts:state.post 
    } 
} 

export default reduxForm({ 
form:'post', 
fields:['title','body'], 
validate:validate, 
},mapStateToProps,{addPost})(AddPost); 

Answer 1

machen Wenn Sie redux-form verwenden. Checkout das Beispiel mit FieldArray, das sollte helfen.