代码之家 › 专栏 › 技术社区 › Nicholas Haley

反应渲染方法clobbering

reactjs javascript

Nicholas Haley · 技术社区 · 6 年前

我最近遇到了一个有趣的情况,当涉及到react渲染方法时。我有一个简单的习惯 Select 类似于HTML的组件 <select> 元素。它将打开选项的下拉列表,当选择某个选项时:

a)设置下拉列表 isVisible 状态为 false .

b)触发 onChange 事件。

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

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

这并没有按预期工作。单击某个选项后,我的下拉列表将保持打开状态,直到我的 一次改变 操作已完成。我现在的理论是 一次改变 正在导致多个状态更改,而这反过来又会破坏 render 我的方法 选择 组件。为了检验这个理论,我把 this.props.onChange(value); 在一个 setTimeout . 即使有一段时间 0 这个问题似乎已经解决了。不幸的是,这感觉很糟糕。我很想更好地了解正在发生的事情,以及一个更优雅的解决方案。

1 回复 | 直到 6 年前

Gaspar Teixeira 6 年前

你试过这样的吗? 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')
);

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

5 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

5 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前