[React Final Form] 是否适用于 Material-UI 3.x？

Question

我想使用 Material-UI 中的 TextField 和 react-final-form ( https://github.com/final-form/react-final-form).

主要问题是"How to get values object?"

我无法从 TextField 中获取它。

结果为：

我已经尝试过不同的示例，但没有任何效果。

我的代码：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import './loginForm.css';
import { Form, Field } from 'react-final-form';

const handleSubmit = (event, values) => {
  console.log('onsubmit event target ', event.target);
  event.preventDefault();
  console.log('onSubmit values: ', values);
};

const onChange = (event) => {
  console.log('on changed: ', event.target.value);
};

const LoginForm = () => (
  <Card className="card">
    <Form
      onSubmit={handleSubmit}
      onChange={onChange}
      render={({ values }) => (
        <form className="login-form" onSubmit={handleSubmit}>
          <Field
            name="pin"
            component={TextField}
            id="standard-name"
            label="PIN"
            value={values}
            onChange={onChange}
          />
          <Button
            type="submit"
            onClick={handleSubmit}
            variant="contained"
            color="primary"
            className="login-btn"
          >
            Sign in
          </Button>
        </form>
      )}
    />{' '}
  </Card>
);

export default LoginForm;

版本：

"@material-ui/core": "^3.9.2",
"react-final-form": "^4.0.2",

Answer 1

不能直接使用@material-ui/core/TextField，需要先包装一下：

import React from 'react'
import TextField from "@material-ui/core/TextField";

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}) => (
  <TextField
    {...rest}
    name={name}
    helperText={meta.touched ? meta.error : undefined}
    error={meta.error && meta.touched}
    inputProps={restInput}
    onChange={onChange}
    value={value}
  />
)

现在您已将必要的道具传递给@ui/TextField。如果您不进行验证，则不需要传递元数据。

https://github.com/final-form/react-final-form#third-party-components

https://codesandbox.io/s/2z5y03y81r

Answer 2

是的！公认的答案非常好，但如果能为我们为所有表单组件完成此操作，那就太好了。原因是每个表单组件都有细微的差异，这使得传递属性有点复杂。

有一个现有项目为此开了个好头，每个月都有大量下载，但它似乎已被放弃并停在 MUIv2。

因此，我创建了自己的想法来制作现代且经过测试的东西。它易于使用且非常灵活...

来源：https://github.com/lookfirst/mui-rff
演示：https://lookfirst.github.io/mui-rff/
Codesandbox：https://codesandbox.io/s/react-final-form-material-ui-example-tqv09

该演示还展示了我最喜欢的 RFF 功能之一，即能够轻松控制表单呈现。这大大提高了大型表单的性能。

[React Final Form] 是否适用于 Material-UI 3.x？

Does [React Final Form] work with Material-UI 3.x?

reactjs

material-ui

react-final-form