Функция редактирования для реакции

Question

Я реализую функцию редактирования с реагировать сейчас.Проблема в том, что я еще не нашел хорошего решения для этого.Я хочу сделать вид, как показано ниже.Текстовая область заголовка и описания уже написана с текстом по умолчанию.Этот текст не заполнитель.Если пользователь нажимает кнопку, пользователь может редактировать текст.

Я попробовал два следующих пакета, но он не подходит для моих целей.

1. TextareaAutosize

   импортировать TextareaAutosize из'act-autosize-textarea ';

TextareaAutosize имеет атрибут значения.но если я использую это, я не могу редактировать текст в нем.И значение по умолчанию, кажется, не работает.Знаете ли вы, как поместить текстовое значение по умолчанию в компонент TextareaAutosize?

2.AvInput

import { AvForm, AvField, AvGroup, AvInput, AvRadioGroup, AvRadio } from 'availity-reactstrap-validation';

Я думаю, что это еще одно хорошее решение, но кнопка отправки, похоже, не настроена.Я должен поместить кнопку Edit в правом верхнем углу обзора.Но если я использую этот пакет, кнопка «Отправить» находится внизу, и кажется, что должен использоваться тег.

Знаете ли вы, как подключить мою собственную кнопку отправки к AvInput?Кнопка в других тегах, а не в ее.

https://availity.github.io/availity-reactstrap-validation/components/avform/

 <FormGroup>
    <Button>Submit</Button>
 </FormGroup>

другое решение Если у вас есть лучшее решение или опыт, пожалуйста, дайте мне знать.

Заранее спасибо

Answer 1

Я сослался на приведенный ниже ответ и изменил UX.

Отправьте форму, используя кнопку вне тега

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

кнопка отправки, кажется, включена в тег формы.