React调用函数调用无状态组件

时间:2018-02-01 13:25:11

标签: javascript reactjs

我正在使用React.JS制作过滤器组件。 其中一些过滤组件嵌入在面板(div)中。面板的包装部分如下所示:

        Initiative <a onClick={() => {this.setState({ showInitiatives: true })}} className="milestone-list-link" href="#initiative">
          {this.state.selectedInitiative}
          <InitiativeSelector
            initiatives={initiatives || {}}
            show={this.state.showInitiatives}
            selector={
              () => {
                console.log('called selector state:', this.state)
                this.setState({ showInitiatives: false })
              }
            }
          />
          <FilterIcon />
        </a>

我的<InitiativeSelector />如下所示:

const InitiativeSelector = ({initiatives, show, selector}) => {
  return (show) ? (
    <div className="list-filter">
      <div>
        <input placeholder="Search..." />
      </div>
      <ul>
        {
          Object.values(initiatives).map((initiative, i) => <li onClick={() => {selector()}} key={i}>{initiative.name}</li> )
        }  
      </ul>
    </div>
  ) : null
}

当我运行时,我的selector会被调用。因此,我看到状态打印到控制台。但是,this.setState({ showInitiatives: false })似乎没有做任何事情。我的模态不会隐藏,而我点击<li>showInitiatives的第二个(等)时间仍然设置为true

1 个答案:

答案 0 :(得分:2)

这是因为点击事件冒充DOM树并结合setState

的异步性质

首先li.onClick点击selector来调用setState({ showInitiatives: false})

然后a.onClick触发调用setState({ showInitiatives: true })。您可以通过向其添加日志语句来检查它是否正确。

现在您有2个待处理的更新

{ showInitiatives: false}
{ showInitiatives: true}

合并时是noop。

您需要通过调用li.onClick来停止e.stopPropagation()内的事件传播,或重新考虑a.onClick处理程序正在做什么。