react-table v7 在 react-hook-form 中

Question

我正在研究一个复杂的反应形式，它几乎没有控制输入以及 grid/table。目前我正在使用 react-hook-form 进行验证。
这是我的模型。这里的想法是根据需要显示网格，直到用户添加一些数据。用户可以通过单击“+”或“-”按钮来 add/remove 数据。

当我在这里提交时，我在提交的数据中看到了

{
  "fname": "sasa",
  "lname": "asasasa"
}

这是预期的输出

{
  "fname": "sasa",
  "lname": "asasasa",
  "localAddress":[
    {
      "street1":"street1",
      "street2":"street2",
      "city":"city"
    },
    {
      "street1":"street2",
      "street2":"street2",
      "city":"city"
    }
  ]
}

这是我的 codesanbox
Codesanbox

不确定如何将 react-table（或任何 table 组件）与 react-hook-form（或任何反应形式）集成。使用 "react-table" 构建表单对我来说是必须的。

感谢任何帮助。

Answer 1

如“使用 UI 库”部分的 get-started docs 所述：

Option 3: we can set up a custom register using the useEffect Hook and update the value via setValue.

因此，对于您的情况，需要完成以下操作：

export default function App() {
  const { register, handleSubmit, setValue } = useForm();
  // ... 

  React.useEffect(() => {
    register({ name: "localaddress" });
  }, [register]);

  const addLocalAddress = function() {
    // ... 
    setValue("localaddress", d);
    setLocalAddress(d);
  };

  // ... 
}

有了这个，你需要通过替换这个来摆脱 Controller：

<Controller
  name="tag"
  control={methods.control}
  as={
    <Table1
      name="tag"
      ref={methods.register}
      columns={columns}
      data={localAddress}
      {...methods}
    />
  }
/>;

有了这个：

<Table1 columns={columns} data={localAddress} />

应该是这样。当然还有 sandbox.

Answer 2

给你:

首先：我们需要 input 框，其中 name 可以生成文本输出

name="localAddress[0][street1]"
name="localAddress[0][street2]"
name="localAddress[0][city]"

name="localAddress[1][street1]"
name="localAddress[1][street2]"
name="localAddress[1][city]"


// to generate the name you can do something like this
<Input
    type="text"
    name={`localAddress[${i}][${columns[j]["accessor"]}]`}
    placeholder={columns[j]["accessor"]}
    innerRef={methods.register}
/>

其次： 我们需要访问 methods

// pass it from props
<Table1
    name="tag"
    ref={methods.register}
    columns={columns}
    data={localAddress}
    methods = {methods} // <---- Pass HERE
/>

// access it via props
export const Table1 = React.forwardRef(({ columns, data, methods }, ref) => {

WORKING DEMO :（对于输出你可以检查控制台）

react-table v7 在 react-hook-form 中

react-table v7 within react-hook-form

reactjs

react-table

react-hook-form

react-forms