[英]react-table v7 within react-hook-form
我正在研究一种复杂的反应形式,其中几乎没有受控输入以及网格/表格。 目前我正在使用 react-hook-form 进行验证。
这是我的模型。 这里的想法是根据需要显示网格,直到用户添加一些数据。 用户可以通过单击“+”或“-”按钮添加/删除数据。
当我在这里提交时,我在提交的数据中看到
{
"fname": "sasa",
"lname": "asasasa"
}
这是预期的 output
{
"fname": "sasa",
"lname": "asasasa",
"localAddress":[
{
"street1":"street1",
"street2":"street2",
"city":"city"
},
{
"street1":"street2",
"street2":"street2",
"city":"city"
}
]
}
这是我的密码箱
密码箱
不知道如何将 react-table (或任何表格组件)与 react-hook-form (或任何反应形式)集成。 使用“react-table”构建表单对我来说是必须的。
感谢任何帮助。
如“使用 UI 库”部分的入门文档中所述:
选项 3:我们可以使用
useEffect
Hook 设置自定义寄存器并通过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} />
应该是这样的。 当然还有沙盒。
这里是 go:
首先:我们需要input
框, name
可以生成文本output
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) => {
工作演示:(对于 output,您可以检查控制台)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.