Работает ли [React Final Form] с Material-UI 3.x?

Я хочу использовать TextField из Material-UI с response-final-form (https://github.com/final-form/react-final-form).

Главный вопрос: «Как получить values объект?»

Я не могу получить его из 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",

reactjs material-ui react-final-form
person Julia    schedule 21.02.2019    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Вы не можете напрямую использовать @ 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

person Mke Spa Guy    schedule 22.02.2019

arrow_upward
6
arrow_downward

Да! Принятый ответ неплох, но было бы неплохо, если бы это было сделано за нас для всех компонентов формы. Причина в том, что каждый компонент формы имеет тонкие различия, что усложняет понимание передачи свойств.

Был один существующий проект, который положил начало этому и получает массу загрузок каждый месяц, но, похоже, он заброшен и останавливается на MUIv2.

Итак, я создал свой собственный взгляд на создание чего-то современного и проверенного. Он прост в использовании и очень гибок ...

Демонстрация также демонстрирует одну из моих любимых функций RFF, а именно возможность легко контролировать рендеринг форм. Это немного улучшает производительность больших форм.

person Jon Stevens    schedule 01.11.2019
comment
Perfect @JonStevens Вы решили мою проблему, я действительно боролся с автозаполнением материала пользовательского интерфейса. Благодарность - person Agent K; 20.04.2021