Question

您好我是React的新手，并且在试图弄清楚如何使用React动态添加输入字段时迷失了。如果有人可以帮我弄清楚如何绑定onclick以动态地向表单添加另一个字段。如何单击添加按钮，另一个选项输入将呈现

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

如果您使用redux-form。使用FieldArray查看示例，这应该会有所帮助。

ReactJS动态添加多个输入字段

1 个答案: