Question

我需要一个click功能来通过flux action对商店进行更新，并且还会更新组件的状态。

实施例：我有一个包含故事数据的表单字段，以及一个说明表单模式是否打开的状态。

// Initial state
return {
    story: this.props.story,
    modalIsOpen: true
}

-

// Click function to close the modal
closeModal: function(e){
    e.preventDefault();
    story.update(newStory)  // <== Flux action to update the story, which then updates this component 
    this.setState({modalIsOpen: false})  // <== To actually close the modal
}

但似乎无论我把第一次运行而不是第二次运行。所以，如果我先story.update(newStory)执行该this.setState({modalIsOpen: false})而不是.entfall a { text-decoration : line-through; } 反之亦然......

任何想法我做错了什么或如何执行两者？

Answer 1

您this.setState()之后不应该需要story.update() 可能在您的操作调用之后，在执行this.setState()之前重新呈现您的组件。流程应该是：

您的组件调用story.update()
商店收听调度员和更新
商店发出更改
您的组件听取更改
响应商店更新的组件内部的方法setState( {modalIsOpen: false} )。

此外，您的story似乎不需要处于状态：您的组件只是简单地呈现this.props.story。

Answer 2

如果您使用ES2015类创建React组件（而不是React.createClass()），您可能会忘记将事件处理程序方法绑定到组件的上下文。有几种方法可以轻松完成，这是一个很好的教程：http://www.ian-thomas.net/autobinding-react-and-es6-classes/

我更喜欢使用autobind-decorator。有了它，您应该将组件修改为：

import autobind from "autobind-decorator";

class Foo extends React.Component {

  /* ... */

  @autobind
  closeModal: function(e){
    e.preventDefault();
    story.update(newStory)  // <== Flux action to update the story, which then updates this component 
    this.setState({modalIsOpen: false})  // <== To actually close the modal
  }

}

React setState和flux action update

2 个答案: