处理兄弟组件之间的数据并更新父组件：React hooks

Question

我需要在两个 table 之间移动数据。我在父组件中获取数据，然后将其传递给 <Available/> 。从这个组件我应该能够 select 数据项并添加它（也添加到 <Selected/> 组件。一旦添加，该行应该在 Available 中删除并移动到 Selected 。以类似的方式我应该能够从 <Selected/> 组件中删除（也可以全部删除）数据，然后应该将其放回 <Avaiable/>。我正在使用 react-table 用于网格目的

我试过的代码：https://codesandbox.io/s/react-hooks-example-forked-0rqb9

有人可以帮我吗

应用组件

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { data } from "./data";
import { Available } from "./Available";
import { Selected } from "./Selected";

function App() {
  const [dataConfig, setDataConfig] = useState({ available: [], selected: [] });

  useEffect(() => {
    setDataConfig({ ...dataConfig, available: data });
  });

  function updateDataConfig() {}

  return (
    <>
      <div>
        <div>Available Table</div>
        <Available
          available={dataConfig.available}
          updateDataConfig={updateDataConfig}
        />
      </div>
      <div>
        <div> Selected Table</div>
        <Selected
          selected={dataConfig.selected}
          updateDataConfig={updateDataConfig}
        />
      </div>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

可用

import React, { useState, useEffect } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

export function Available({ available }) {
  const [data, setData] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    setData(available);
  }, [available.length]);

  useEffect(() => {
    const columns = [
      {
        id: "check",
        accessor: "checkbox",
        Cell: ({ original }) => {
          return <input type="checkbox" className="checkbox" />;
        }
      },
      {
        id: "name",
        accessor: "name",
        Header: "Header"
      },
      {
        id: "age",
        accessor: "age",
        Header: "Age"
      }
    ];
    setColumns(columns);
  }, []);

  function handleAdd() {}

  function handleAddAll() {}

  return (
    <>
      <button type="button" onClick={handleAddAll}>
        Add All
      </button>
      <button type="button" onClick={handleAdd}>
        Add Selected
      </button>

      <ReactTable
        data={data}
        columns={columns}
        showPagination={false}
        minRows={5}
      />
    </>
  );
}

已选择

import React, { useState, useEffect } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

export function Selected({ selected }) {
  const [data, setData] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    setData(selected);
  }, [selected.length]);

  useEffect(() => {
    const columns = [
      {
        id: "check",
        accessor: "checkbox",
        Cell: ({ original }) => {
          return (
            <input type="button" onClick={handleDelete}>
              Delete
            </input>
          );
        }
      },
      {
        id: "name",
        accessor: "name",
        Header: "Header"
      },
      {
        id: "age",
        accessor: "age",
        Header: "Age"
      }
    ];
    setColumns(columns);
  }, []);

  function handleDeleteAll() {}

  function handleDelete() {}

  return (
    <>
      <button type="button" onClick={handleDeleteAll}>
        Delete All
      </button>
      <ReactTable
        data={data}
        columns={columns}
        showPagination={false}
        minRows={5}
      />
    </>
  );
}

Answer 1

检查我的 codesandbox

的小型工作版本

我实现了“添加”和“删除”功能。出于某种原因，复选框保持选中状态，我不明白为什么，但你可以清楚地了解它是如何工作的。

我还删除了内部状态 data 并仅使用道具传递的数据。

希望它能帮助你继续你的工作。

处理兄弟组件之间的数据并更新父组件：React hooks

Handling data between sibling compoenents and updating the parent: React hooks

reactjs

react-hooks

react-state