Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I want to use a TextField from Material-UI with react-final-form (https://github.com/final-form/react-final-form).

The main question is "How to get values object?"

I cannot get it from TextField.

The result is:

enter image description here

I've already tried different examples but nothing works.

My code:

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;

versions:

"@material-ui/core": "^3.9.2",
"react-final-form": "^4.0.2",
like image 415
Julia Avatar asked Feb 21 '19 14:02

Julia


People also ask

Is material UI version 3 out?

That being said, material ui version 3 is out. We should track MUI being migrated from Material Design v2 to Material Design version v3. I'm sure they'll be a few tickets that come out requesting the adoption, so I figured this ticket could act as a stub and catch-all for MUI support for the design language's latest update.

How to use material UI documentation?

How to Use Material UI Documentation. On the Material UI site, click the upper left menu and you'll see a sidebar. We'll first talk about the two sections: Components and Component API. The main difference between these 2 sections is that the Components section contains examples/demos and explanations for each component while ...

Why can’t I access the ref with material UI Hook form?

Unfortunately this is not the case when we use Material UI; the library does not yet provide any similar prop to pass the register as a value to the ref prop. React Hook Form includes a wrapper component called Controller to work with component libraries where you can’t access the ref directly.

Can I use material UI onchange with react Hook form?

Our final component is a Slider component, which is a fairly common component. The code is simple to understand, but there is one catch: the onChange function provided by Material UI does not work with the onChange of React Hook Form because the signature is different.


2 Answers

You can't directly use @material-ui/core/TextField, you need to wrap it first:

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}
  />
)

Now you have the necessary props passed to @ui/TextField. If you are not doing validation you don't need to pass the meta stuff.

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

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

like image 141
Mke Spa Guy Avatar answered Sep 28 '22 04:09

Mke Spa Guy


Yes! The accepted answer is quite good, but it would be really nice to have this done for us for all of the form components. The reason is that each form component has subtle differences that makes passing properties kind of complicated to figure out.

There was one existing project that made a good start to this and gets a ton of downloads each month, but it seems abandoned and stops at MUIv2.

So, I've created my own take on making something modern and tested. It is drop in easy to use and very flexible...

  • Source: https://github.com/lookfirst/mui-rff
  • Demo: https://lookfirst.github.io/mui-rff/
  • Codesandbox: https://codesandbox.io/s/react-final-form-material-ui-example-tqv09

The demo also shows off one of my favorite features of RFF, which is the ability to easily control form renders. This improves performance of large forms, quite a bit.

like image 27
Public Profile Avatar answered Sep 28 '22 06:09

Public Profile