gpt4 book ai didi

ReactJS 动态添加多个输入字段

转载 作者:行者123 更新时间:2023-12-05 07:45:25 25 4
gpt4 key购买 nike

你好,我是 React 的新手,我迷失了尝试弄清楚如何使用 React 动态添加输入字段。 如果有人可以帮助我弄清楚如何绑定(bind)一个 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);

最佳答案

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

关于ReactJS 动态添加多个输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41669468/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com