单击获取编辑的行数据

Question

我是 ReactJS 的新手，在让 ReactTable 工作方面遇到了一些麻烦。

我已将单元格定义为可编辑，如下所示：

const [editing, setEditing] = useState(null);   

const columns = [{
  Header: 'Brand',
  accessor: 'brand',
  Cell: props => editableCell(props)
}]

const editableCell = props => {
 return (editing !== null && editing.index === props.index) ? (<div
  contentEditable="true"
  suppressContentEditableWarning>
   {props.value}
 </div>) : props.value;
}

return (
 <ReactTable
  data={cars} 
  columns={columns} 
  pages={pages}
  loading={loading}
  defaultPageSize={pageSize}
  className="-striped -highlight"/>
);

const edit = row => {
 if(editing !== null && editing.index !== row.index){
  return;
 }
 setEditing(row);
}

const save = () => {
 console.log(editing); // should return edited data, but returns old data, because data doesn't update when user modifies each cell.
}

如何在保存时从已编辑的行中获取新数据？我是否必须创建一个侦听器来在键入时将值更改为状态？我知道为什么它不起作用，但我不知道实现什么或如何实现。

Answer 1

您可以将 onBlur() 事件用于 contentEditable div，并且在 onBlur 事件中您可以使用 e.target.innerHTML 或 e.target.innerText 获取值。

在这个 editableCell 函数中，您将使用 props.original 获取数据。使用这个 props.original 你可以从状态中找到你的数据，之后如果你想将数据更新到 state 那么你可以很容易地做到。

请检查下面的代码和工作 stackblitz 演示。

editableCell(props) {
    return (
      <div
        className={"edittable"}
        contentEditable
        suppressContentEditableWarning
        onBlur={e => {
          console.log(`original value : ${JSON.stringify(props.original)}`)
          const data = [...this.state.data];
          let row = data.find(o=>o.id == props.original.id);
          row[props.column.id] = e.target.innerHTML;
          console.log(`upated row value : ${JSON.stringify(row)}`)
        }}
        dangerouslySetInnerHTML={{
          __html: this.state.data[props.index][props.column.id]
        }}
      />
    );
}

单击获取编辑的行数据

Get edited row data on click

reactjs

react-table