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

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

我有在两个表之间移动数据的要求。我在父组件中获取数据，然后将其传递给 <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,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,useEffect } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

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

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

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

  function handleDeleteall() {}

  function handleDelete() {}

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

解决方法

检查我的 codesandbox 的一个小工作版本

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

我也删除了内部状态 data 并且只使用了 props 传递的数据。

希望它能帮助您继续工作。