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.
}

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

Answer 1

您可以为onBlur() div使用contentEditable事件，在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]
        }}
      />
    );
}

点击获取编辑的行数据

1 个答案: