我正在使用AG-Grid react,并将一个数组绑定到AG-Grid的行。有一个名为“comments”的列接受用户输入。默认值为空。在我向该字段输入一些数据后,绑定到AG Grid的数组不会更新。注解仍然是空的。2我正试图把这个数组和用户新输入的注解一起发送到后端。3我该怎么做呢?
import React, {useEffect, useState} from "react";
import {getData} from '../service';
const MainPage = ({data})=>{
const [rowData,setRowData] = useState([]);
const [columnDefs,setColDefs] = useState([]);
const prepareCol = ()=>{
fields = [];
fields.push({
field: "ID"
});
fields.push({
headerName: 'comments',
editable: true,
valueSetter: params=>{
if(params.data['comments']!==params.newValue){
// assigning new value
params.data['comments'] = params.newValue;
}
return true;
},
valueGetter: params=>{
return params.data.comments;
}
});
return fields;
}
useEffect(()=>{
getData().then(res=>{
setRowData(res['rowData']);
setColDefs(prepareCol);
})
},[])
return(
<>
<div style={{height: 100, width: '100%'}}>
<AgGridReact>
rowData={rowData}
columnDefs={columnDefs}
</AgGridReact>
</div>
</>
)
}
export default MainPage;
1条答案
按热度按时间jk9hmnmh1#
我不认为您需要valueGetter和valueSetter来完成此操作,只需添加
editable: true
即可。我还在你的代码中发现了一些错误。AgGridReact组件应该为你的case使用一个自结束标记。所以我做了一些修改。这应该可以工作