Reactjs react的编辑功能

我现在正在用react实现编辑功能。问题是我还没有找到解决这个问题的好办法。 我想做一个如下的视图。 标题和说明文本区域都已使用默认文本写入。 此文本不是占位符。 如果用户单击按钮，则用户可以编辑文本

我尝试了以下两个软件包，但它不适合我的目的

文本区域自动调整大小

从“react autosize textarea”导入textarea autosize

TextareaAutosize具有值属性。但是如果我使用这个，我就不能编辑其中的文本。默认值似乎不起作用。 您知道如何将默认文本值放入TextArea AutoSize组件中吗

2.无输入

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

我认为这是另一个很好的解决方案，但提交按钮似乎不是定制的。 我应该把编辑按钮放在视图的右上方。 但是如果我使用这个包，提交按钮放在底部，看起来应该用它来标记

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

提交

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

先谢谢你

---

我参考了下面的答案并更改了UX

用于创建控件的元素通常出现在表单元素内部，但在用于构建用户界面时，也可能出现在表单元素声明外部。这将在内部事件一节中讨论。请注意，窗体外部的控件不能是成功的控件

---

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

使用这些软件包有什么具体原因吗？只需在单击时在

p

和

textarea

标签之间切换即可。这些软件包似乎对您的目的没有帮助。@Nagesh Katna使用react引导组件看起来不错。您是否考虑过使用非引导组件，如materialize或semantic UI？在react中，它们比bootstrap好得多，我相信它们也可以解决您的问题。哦，谢谢。我会试试看。：）

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