Как получить значение из mui TextField

React компонент TextField библиотеки @mui/material — это сложный элемент и получить значение через свойство ref нельзя.

Разработчики понимали, что доступ к HTMLInputElement внутри компонента нужно предоставить, и потому реализовали свойство inputRef, которое как раз и ссылается на этот элемент.

Следующая демка показывает как это работает:

import { Button, TextField } from '@mui/material';
import React, { useRef } from 'react';
interface IProps {}

export const ValueAccessDemo = (props: IProps): React.ReactElement => {
  const ref = useRef<HTMLInputElement | null>(null)

  const handleClick = (e: React.MouseEvent): void => {
    if (ref.current !== null) console.log(ref.current.value);
  };

  return (
    <TextField label="Текст" inputRef={ref} />
    <Button onClick={ handleClick }>Применить</Button>
  );
};

import { Button, TextField } from '@mui/material';

import React, { useRef } from 'react';

interface IProps {}

export const ValueAccessDemo = (props: IProps): React.ReactElement => {

const ref = useRef<HTMLInputElement | null>(null)

const handleClick = (e: React.MouseEvent): void => {

if (ref.current !== null) console.log(ref.current.value);

};

return (

<Button onClick={ handleClick }>Применить</Button>

);

};

material UI

Написать комментарий

Данная запись опубликована в 18.06.2023 14:12 и размещена в рубрике React. Вы можете перейти в конец страницы и оставить ваш комментарий.

Комментарии к «Как получить значение из mui TextField»

Понравилась статья? Есть вопросы? - пишите в комментариях.

Имя (обязательно)	Е-майл (не будет опубликован на сайте, обязательно для заполнения)
Комментарий: