reactjs - 将formik与material-table集成的好方法是什么?
问题描述
我正在尝试将 formik 添加到我使用material-table构建的表格中。有没有办法以另一种方式访问 api 以将其与 formik 集成?
这是我正在使用的表格:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import MaterialTable, { FormField, MTableEditRow } from "material-table";
import { Formik, Field, getIn } from "formik";
const FormikField = props => (
<Field
name={props.columnDef.field}
render={({ field, form }) => {
const { name } = field;
const { errors, setFieldValue } = form;
const showError = !!getIn(errors, name);
return (
<FormField
{...props}
{...field}
error={showError}
onChange={newValue => setFieldValue(name, newValue)}
/>
);
}}
/>
);
const MuiTableEditRow = ({ onEditingApproved, ...props }) => (
<Formik
initialValues={props.data}
onSubmit={newData => {
delete newData.tableData;
onEditingApproved(props.mode, newData, props.data);
}}
render={({ submitForm }) => (
<MTableEditRow {...props} onEditingApproved={submitForm} />
)}
/>
);
class App extends Component {
render() {
return (
<MaterialTable
data={[{ id: 1, firstName: "ax", firstName: "Baran" }]}
columns={[
{ title: "First Name", field: "firstName" },
{ title: "Last Name", field: "lastName" }
]}
editable={{
onRowAdd: newData =>
new Promise((resolve, reject) => {
resolve();
})
}}
components={{
EditRow: MuiTableEditRow,
FormField: FormikField
}}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
解决方案
看起来 EditField 组件可以使用 formik 访问表:
以下是对上述代码的修改:
// imports
...
const FormikMTInput = props => (
<Field
name={props.columnDef.field}
render={({field, form}) => {
const {name} = field
const {errors, setFieldValue} = form
const showError = !!getIn(errors, name)
return (
<div>
<MTableEditField
{...props}
{...field}
error={showError}
onChange={newValue => setFieldValue(name, newValue)}
/>
{errors[field.name] && (
<div style={{color: "#f44336"}}>{errors[field.name]}</div>
)}
</div>
)
}}
/>
)
...
const MuiTableEditRow = ({onEditingApproved, ...props}) => (
<Formik
validationSchema={courseLevelSchema} // included a validation object
initialValues={props.data}
onSubmit={values => {
delete values.tableData
onEditingApproved(props.mode, values, props.data)
}}
render={({submitForm}) => (
<MTableEditRow {...props} onEditingApproved={submitForm} />
)}
/>
)
...
<Material
...
components={{
EditRow: MuiTableEditRow,
EditField: FormikMTInput
}}
...
/>
推荐阅读
- c++ - 如何使用 Google 测试将元数据添加到测试/如何将数据从 Google 测试发送到 TestEventListener
- c# - 超时重试消息
- ios - 如何使用 SwiftUI 沿圆形路径绘制文本
- bootstrap-4 - 自定义引导容器宽度以及列的正确方法
- .htaccess - 这三个 .htaccess 重定向的顺序是否重要?
- amazon-web-services - AWS CLI 用户数据脚本未运行
- image - .htaccess 代码强制 twitterbot 使用 http 而不是 https
- c# - MYSQL AES_DECRYPT 函数与 heidiSQL 一起工作,但是当我在我的 C# 程序中运行相同的查询时,总是返回 DBNULL
- javascript - 我正在使用单选按钮创建一个多项选择题考试项目
- python - 如何在pyspark中使用nestes数组将数据框转换为dict