【问题标题】:ag-grid react cellRendererFramework doesn't re render when state changed当状态改变时,ag-grid react cellRendererFramework 不会重新渲染
【发布时间】:2019-05-22 00:00:07
【问题描述】:

我在 ag-grid-react 中显示数据,并且网格已经基于状态进行条件单元格渲染。这是我的代码。这是首次运行并显示“是”按钮。当我单击按钮时,我想用 NOOO 按钮进行更改

这是状态

this.changebutton = this.changebutton.bind(this);
this.state= {
   isyes = "yes"
}

这是 ag-grid-cell-renderer

cellRendererFramework: (params) => {
  return <div>
   {
     this.state.isyes === "yes" ? 
<button onClick= {() => this.changebutton()}>YEAH</button> 
: 
<button onClick= {() => this.changebutton()}>NOOOO</button>
 }

</div>

}

这是状态改变器

changebutton() {
     this.setState({isyes: "no" })
      console.log(this.state.isyes)
}

我看到状态正在正确更改,但没有看到任何按钮更改。为什么?

【问题讨论】:

    标签: reactjs ag-grid


    【解决方案1】:

    您的代码似乎不完整,无法检查您的情况。首先想到的是表达式被评估一次(也许,因为它作为对象的方法出现,而不是直接在渲染函数中)并且永​​远不会重新触发。

    还要注意 setState()async 所以你不应该

    this.setState({isyes: "no" });
    console.log(this.state.isyes);
    

    而不是你应该

    this.setState(
        {isyes: "no" },
        () => console.log(this.state.isyes);
    );
    

    尝试:

    api.refreshCells() 
    

    参考:ag-grid.com/javascript-grid-cell-rendering-components

    【讨论】:

    • 感谢您的回答,我看到您的代码立即改变了状态。但按钮仍然没有改变
    • 按钮没有改变,因为生成它的函数被评估一次,检查ag-grid.com/javascript-grid-cell-rendering-components的“刷新”部分
    • 感谢您的回答。 grid.redrawRows 解决了刷新问题。但我还有另一个问题。所有行都有自己的按钮,取决于 isyes 状态。但正如您所见,isyes 是静态的。我必须将状态定义为动态和基于行的。我尝试将 this.state[ROW_ID] 用于动态状态。但似乎不起作用。静态状态有效,但会影响所有行,因为行按钮是由静态状态创建的。
    猜你喜欢
    • 2020-04-22
    • 2020-01-20
    • 2020-09-10
    • 2018-11-29
    • 2020-10-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多