Как передать onChange в пользовательский (materialize) компонент react

Question

Доброго времени суток!

Использую react-materialize, как передать onChange в компонент Textarea библиотеки materialize?

export const CreatePage = () => {

  const [text, setText] = useState("")

  return (
    <div className="row">
        <div className="col s8 offset-s2">
                <Textarea 
                    id="create-text"
                    type="text" 
                    value={text} 
                    onChange={e => setText(e.target.value)} 
                    s={12}
                    label="Введите текст"
                />
        </div>
    </div>
  )
}

Выдаёт такой варнинг и ввод текста перестаёт работать:

Также пробовал ставить вместо value -> defaultValue как написано. Тогда всё работает, но в базу ничего не записывается.

Но если убрать пользовательский компонент, написать вместо него textarea - всё работает и записывается в базу, но без красивостей компонента materialize.

Answer 1

Спасибо @Denis Bubnov, что не остался равнодушным. Так же спасибо Павлу из телеграмма) Ощущаю себя как на поле чудес, а ведь это прочитает только @Denis Bubnov. Ну да ладно

Нашёл даже несколько вариантов:

1) Добавить onChange в рендер прямо в библиотеку materialize в файл Textarea.js, как на изображении:

2 - правильный) Обернуть в handleChange вызов onChange

export const CreatePage = () => {

  const [text, setText] = useState("")

  const handleChange = e => setText(e.target.value)

  return (
    <div className="row">
        <div className="col s8 offset-s2">
                <Textarea 
                    id="create-text"
                    type="text" 
                    value={text} 
                    onChange={handleChange} 
                    s={12}
                    label="Введите текст"
                />
        </div>
    </div>
  )
}

БЛОГ НА HUSL

Как передать onChange в пользовательский (materialize) компонент react

Ответы (1 шт):