Question

最近，当涉及到React渲染方法时，我遇到了一个有趣的情况。我有一个简单的自定义Select组件，其工作方式类似于HTML <select>元素。它会打开一个选项下拉列表，并在选择一个选项时：

a）将下拉菜单的isVisible状态设置为false。

b）触发onChange事件。

我遇到的麻烦是选择一个选项后立即关闭下拉菜单。关闭下拉列表应异步执行，而不要等待onChange完成。我认为这应该不成问题，因为我们可以在onChange回调中调用setState方法。

handleOnClick(value) {
    this.setState({
      isVisible: false
    }, () => {
      this.props.onChange(value);
    });
  }

这没有按预期工作。单击选项后，下拉菜单将保持打开状态，直到完成昂贵的onChange操作为止。我目前的理论是onChange会导致多个状态变化，从而改变了render组件中的Select方法。为了验证这一理论，我将this.props.onChange(value);包裹在setTimeout中。即使使用0的时间，问题似乎也已经解决。不幸的是，这感觉很棘手。我想更好地了解正在发生的事情，以及什么是更优雅的解决方案。

Answer 1

您尝试过类似的方法吗？ https://jsfiddle.net/69z2wepo/296216/

    class Select extends React.Component {
    constructor(props){
    super(props);
    this.state = {
        isVisible: false,
      element: "Canada",
    }
  }

  onClickHandler(event){
    this.setState({isVisible: false, element: event.currentTarget.dataset.id});
  }

  onResetElement() {
    this.setState({isVisible: true, element: null });
  }

  render() {
    return (
    <div>
     {this.state.isVisible && 
      <ul className="select">
        <li data-id="Brazil" onClick={::this.onClickHandler}>Brazil</li>
        <li data-id="Canada" onClick={::this.onClickHandler}>Canada</li>
        <li data-id="England" onClick={::this.onClickHandler}>England</li>
      </ul>
      }
      {!this.state.isVisible && <div onClick={::this.onResetElement} className="selected">{this.state.element}</div>}
    </div>
    );
  }
}

ReactDOM.render(
  <Select  />,
  document.getElementById('container')
);

反应渲染方法的破坏

1 个答案: