用React提交后清除输入字段

ta539tg70

我正在用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()

任何建议将不胜感激。提前致谢!

鲁特维克·巴特(Rutvik Bhatt)

添加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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章