我正在用React编写评论表格。除了这个小问题之外,我几乎已经构建了所需的东西,在提交表单之后,我无法清除输入值。即使输入,我输入的内容仍保留在输入字段中。
我的代码:
CommentsIndex.js
class CommentsIndex extends React.Component {
constructor(props) {
super(props);
this.state = {
url: this.props.url,
comment: '',
};
this.onSubmit2 = this.onSubmit2.bind(this);
}
loadCommentsFromServer() {
$.ajax({
// ajax call working fine
});
}
onSubmit2(value) {
const url = this.props.url;
$.ajax({
url: url,
dataType: 'text',
type: 'POST',
cache: false,
data: {
comment: value
},
success: (data) => {
this.loadCommentsFromServer();
},
error: (xhr, status, err) => {
console.error(url, status, err.toString());
},
});
}
componentDidMount() {
this.loadCommentsFromServer();
}
render() {
return (
<div>
<NewComment onSubmit1={this.onSubmit2} />
<Comments comments={this.state.comments} />
</div>
);
}
}
export default CommentsIndex;
NewComment.js
class NewComment extends React.Component {
constructor(props) {
super(props);
this.state = {
comment: ''
};
this.getInput = this.getInput.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
getInput(e) {
this.setState({
comment: e.target.value
});
}
onSubmit() {
this.props.onSubmit1(this.state.comment);
}
render() {
return (
<div>
<input className="comment-field" onChange={this.getInput} />
<input className="comment-submit" type="submit" value="SUBMIT" onClick={this.onSubmit} />
</div>
);
}
}
export default NewComment;
我尝试在自己的中添加this.setState({ value: '' })
内容,但没有成功。success: (data) => {}
onSubmit2()
任何建议将不胜感激。提前致谢!
添加ref={(input)=>this.commentInput=input}
如下参考:
<div>
<input ref={(input)=>this.commentInput=input} className="comment-field" onChange={this.getInput} />
<input className="comment-submit" type="submit" value="SUBMIT" onClick={this.onSubmit} />
</div>
然后在您的onSubmitMethod中执行以下代码:
onSubmit() {
this.props.onSubmit1(this.state.comment);
this.commentInput.value='';
}
将回调后的值设置为props
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句