反应的编辑功能

Question

我正在实现编辑功能并立即做出反应。问题是我还没有找到好的解决方案。 我想做一个如下图的视图。 标题和描述文本区域均已使用默认文本编写。 该文本不是占位符。 如果用户单击按钮，则用户可以编辑文本。

我尝试了以下两个程序包，但这对我而言并不完美。

1. TextareaAutosize

   从'react-autosize-textarea'导入TextareaAutosize；

TextareaAutosize具有值属性。但是如果使用此功能，则无法编辑其中的文本。而且defaultValue似乎不起作用。 您知道如何将默认文本值放入TextareaAutosize组件吗？

2.AvInput

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

我认为这是另一个很好的解决方案，但是提交按钮似乎没有被定制。 我应该将“编辑”按钮放在视图的右上方。 但是，如果我使用此程序包，则“提交”按钮位于底部，似乎应该使用标记。

您知道如何将我自己的提交按钮与AvInput连接吗？ 该按钮位于其他标记中，而不位于其中。

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

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

1. 其他解决方案 如果您有更好的解决方案或经验，请告诉我。

   提前谢谢

Answer 1

我参考了以下答案并更改了用户体验。

Submit form using a button outside the <form> tag

  

用于创建控件的元素通常出现在FORM元素内部，但是当用于构建用户界面时也可能出现在FORM元素声明之外。有关内在事件的部分将对此进行讨论。请注意，表单外部的控件不能成为成功的控件。

提交按钮似乎包含在表单标签中。