Question

我正在以ag-grid-react显示数据，并且网格已基于状态进行有条件的单元格渲染。这是我的代码。正在首次运行并显示“ YEAH”按钮。当我单击按钮时，我想使用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)
}

我看到状态正在正确更改，但是没有看到按钮的任何更改。为什么？

Answer 1

您的代码似乎不完整，无法检查您的情况。首先要想到的是，表达式只被计算一次（也许因为它是作为对象的一种方法而不是直接在渲染函数中出现的），并且永远不会被触发。

还要通知setState()是async，所以您不应该：

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

代替您应该：

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

尝试：

api.refreshCells()

ref：ag-grid.com/javascript-grid-cell-rendering-components

状态改变后，ag-grid反应cellRendererFramework不会重新渲染

1 个答案: