Integrating Material-UI TextField with TanStack Form
Illustrate the integration process of Material-UI's TextField component as a form field within TanStack Form.
import { useForm, useField } from '@tanstack/react-form';
import { TextField } from '@mui/material';
Import the necessary hooks from TanStack Form and the TextField component from Material-UI.
function CustomTextField({ field }) {
const { getInputProps } = useField(field);
return (
<TextField
{...getInputProps({
id: field.id,
onChange: e => getInputProps().onChange(e.target.value),
onBlur: getInputProps().onBlur,
value: getInputProps().value
})}
/>
);
}
Defines a CustomTextField component that utilizes the useField hook from TanStack Form to manage form states and integrates it with Material-UI's TextField component by spreading the getInputProps onto it.
function MyForm() {
const form = useForm({
defaultValues: {
firstName: ''
},
onSubmit: async (values) => {
alert(JSON.stringify(values, null, 2));
}
});
return (
<form onSubmit={form.handleSubmit}>
<CustomTextField field='firstName' />
<button type='submit'>Submit</button>
</form>
);
}
Creates a form component that initializes the form using useForm hook with a default value. It utilizes the CustomTextField for form fields and handles the form submission.