代码之家 › 专栏 › 技术社区 › Blue

从重做操作重置窗体状态

redux-saga redux reactjs javascript

-2

Blue · 技术社区 · 6 年前

我目前有以下组件,为了简单起见,我在 代码沙盒 here 是的。这说明了我的问题。

对于stackoverflow,这里有一些片段:

class CommentForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      comment: ""
    };

    this.handleCommentChange = this.handleCommentChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleCommentChange(evt) {
    this.setState({ comment: evt.target.value });
  }

  handleFormSubmit(evt) {
    evt.preventDefault();
    this.props.addComment(this.state.comment);
  }
  render() {
    const { submitting } = this.props;

    return (
      <form onSubmit={this.handleFormSubmit}>
          <textarea
            name="comment"
            placeholder="Write your comment here..."
            rows="5"
            value={this.state.comments}
            onChange={this.handleCommentChange}
          />
          <br />
          <input
            type="submit"
            disabled={submitting}
            value="COMMENT"
          />
      </form>
    );
  }
}

我的问题:如何重置窗体状态( this.state.comments = '' ,当我的传奇将行动 COMMENT_ADD_SUCCESS ?

我想避免的是:在redux状态下添加注释。我知道我可以将评论移到redux存储中,并返回如下内容 {...state, commentField: ''} 减速器本身。

为了演示的目的,这个表单很简单,但是我有一个更复杂的表单,我觉得不需要将它添加到redux存储中,因为它的状态是短暂的,一旦组件死亡,状态就可以被丢弃。另外,如果我需要向存储添加注释,我需要创建如下操作 COMMENT_UPDATED ,它会更新redux存储,这可能是一个相当大的麻烦,特别是对于具有许多字段的表单。

3 回复 | 直到 6 年前

Dario 6 年前

我通常将回调作为额外参数传递给操作,并从saga调用回调。所以我会改变你的 CommentForm 发送带有文本值和回调函数的对象的操作的代码:

handleFormSubmit(evt) {
    evt.preventDefault();
    this.props.addComment({ comment: this.state.comment, callback: function() {
      alert("callback invoked");
      // here do cleanup of state as you wish
    }});
  }

并更改传奇以在成功时调用回调:

function* addComment(params) {
  console.log("Adding Comment");

  yield put({ type: "ADD_COMMENT_FETCHING" });

  // Simulate call success
  yield call(delay, 5000);

  alert("(From saga) The comment was added successfully.");
  yield put({ type: "ADD_COMMENT_SUCCESS" });

  params.action.callback(); // <--- here the callback
}

redux状态是未触及的,您还可以考虑添加第二个回调,在saga中出现故障/错误时将调用该回调。我叉了你的沙盒,你可以检查代码 here

DiverseAndRemote.com 6 年前

下面的代码应该可以工作,因为您提供了 submitting 道具。你要做的是捕捉从真到假的转变。

  componentDidUpdate( prevProps ) {
    
    if ( prevProps.submitting === this.props.submitting ) {
      // The state of our comment submission hasn't changed so do nothing.
      return;
    }

    if ( ! this.props.submitting ) {
      // The comment just finished submitting because we
      // we went from true to false
      this.setState( { comments: '' } );
    }

    
  }

Colin Ricardo 6 年前

你能做这样的事吗?

  handleFormSubmit(evt) {
    evt.preventDefault();
    this.props.addComment(this.state.comment);
    this.setState({ comments: ''});
  }

进一步解释@lefi所说的:

您可以添加回调并在saga.js中调用它。

callback = () => {
  this.setState({ comments : '' })
}

handleFormSubmit(comment, callback) {
  ...
}