reactjs - 反应应用程序 - 尝试使用 react-bootstrap-table-next 加载表

Question

尝试使用 react-bootstrap-table-next 编辑表格单元格，我可以成功编辑，但是当我单击页面中的其他组件时，编辑的内容已按原始值恢复..我是根据文档做出反应的新手我已经做到了。

导出默认类 PredictResult 扩展 React.Component<IPredictResultProps, IPredictResultState> render()() 每次我单击或悬停在其他组件上时，整个页面都在渲染页面中的整个组件，并恢复表中的值。

Answer 1

当您再次单击某个组件渲染时，您必须在“onChange”方法中更改状态（使用 setState 方法更改您传递给表的记录）

这只是一个例子

const Firstlist = [{ id: 1, label: 'lable1' }, { id: 2, label: 'lable2' }, { id: 3, label: 'lable3' }]
const App = () => {
  const [list, setList] = useState(Firstlist);
const onChaned=(value,item)=>{
  item.label=value;
  setList([...list]);
  
}
  return (
    <Table>
      <thead>
        <th>
          <td>Id</td>
          <td>Lable</td>
        </th>
        <tbody>
          {list.map(item => <tr key={item.id}>
            <td>{item.id}</td>
            <td><Input value={item.label} type='text'
              onChange={({ target }) => onChaned(target.value,item)} >{item.label}</Input></td>
          </tr>)}
        </tbody>
      </thead>
    </Table>
  );
};

export default App;