Question

我使用react-table npm软件包，并且将表所需的所有数据存储在状态中

componentDidMount() {
    this.props.client
      .query({
        query: ALL_SKUS
      })
      .then(({ data }) => {
        const skus = removeTypename(data.allSkuTypes);
        const newData = skus.map((sku, index) => ({
          serial: index + 1,
          ...sku
        }));
        this.setState({ data: newData });
      })
      .catch(err => {
        console.log(err);
      });
  }

这就是我列的“名称”字段的样子

 {
        Header: 'SKU Name',
        headerClassName: 'vt-table-header',
        accessor: 'name',
        maxWidth: 350,
        Cell: this.renderEditable
      },

这是事件处理程序

 renderEditable = ({ index, column }) => {
    const { data } = this.state;

    return (
      <InputGroup
        onChange={e => {
          const newData = [...data];
          newData[index][column.id] = e.target.value;
          this.setState({ data: newData });
        }}
        value={data[index][column.id]}
      />
    );
  };

最终，这就是所有数据在反应表中的流向

<ReactTable
          loading={data.length === 0 ? true : false}
          showPagination={false}
          className="mt-3 text-center"
          data={data}
          columns={columns}
        />

我尝试从Input中删除value属性，然后向其添加onBlur，同时解决了性能问题，该问题使它最初可以从查询中获取数据。

在我的应用程序中，我还面临许多复杂形式的问题，我们将不胜感激

Answer 1

这是个主意。

不是这样做，而是为表中的单元格提供了一个组件InputGroup，就像我想的那样：

 renderEditable = ({ index, column }) => {
    const { data } = this.state;

    return (
      <InputGroup
        onChange={e => {
          const newData = [...data];
          newData[index][column.id] = e.target.value;
          this.setState({ data: newData });
        }}
        value={data[index][column.id]}
      />
    );
  };

如何创建一个单独的组件来控制其自身状态，而不是为每个单元格更改更改整个表状态，为什么不拥有一个组件CELL来通过任何其他可能的POST请求来更改其自身状态...等。< / p>

这会将显示范围缩小到Cell而不是整个Table都得到渲染。

几乎相同：

class Cell extends React.Component {
  state = { ...yourCellData }

  componentDidMount() {
    this.setState({ ...this.props.youCellData }); //any properties passed from the main component.
  }

  render(){
    const { index, column } = this.props;

    return (
      <InputGroup
        onChange={e => {
          const newData = [...this.state.data];
          newData[index][column.id] = e.target.value;
          this.setState({ data: newData }); //this now modifies the Cell data instead of the whole table
        }}
        value={data[index][column.id]}
      />
    );
  }

}

可能适用于：

 {
        Header: 'SKU Name',
        headerClassName: 'vt-table-header',
        accessor: 'name',
        maxWidth: 350,
        Cell: (index, column) => <YourNewCellComponent index={index} column={column} />
 },

我希望这可以为您提供可以解决问题的总体方法

onChange事件重新呈现整个表

1 个答案: