Reactjs 如何访问其他字段中的字段数据

我有一个使用

Formik

的模态表单。以下两张图片显示了该表单的两种状态，可以通过开关进行切换。最初，我将文本填充到可以动态添加并存储为数组的字段中。
第二张图片显示了我如何切换到

textarea

。在那里，您还可以添加带有逗号的文本，这些文本将转换为数组

是否有办法从第一个屏幕开始在输入字段中填充数据，切换到

textarea

并访问已输入的数据

我知道福米克在某处保持着这种状态。但目前这些字段有一个单独的状态。 以下是我的组件：

class ModalForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
残疾人:对,，
};
}
onChange=（）=>{
这是我的国家({
已禁用：！this.state.disabled，
});
};
render（）{
变量{
可见=假，
一旦取消，
应要求，
提交，
setSubscriberType，
编辑，
subscriptionTypeString，
经过测试，
当选议员，
}=这是道具；
const{gateId}=selectedGates.length&&selectedGates[0]；
const handleSubmit=值=>{
console.log（值）；
onRequest&&onRequest（{gateId，…values}）；
};
const{disabled}=this.state；
返回(
массовый ввод
(
{残疾(
{
返回(
{values.abonents.map（（值，索引）=>(
{
数组帮助。删除（索引）；
}}
/>
))}
arrayHelpers.push（“”）}>
Добавить абонента
);
}}
/>
) : (
)}
Запросить
)}
/>
);
}
}

---

我找到了一个解决方案。您必须为输入和文本区域指定相同的名称，因此当您在输入中添加文本时，将自动更改文本区域中的文本

{

非常简单，formik将值存储在

values.abonents中，因此您可以在textarea中使用它


let{Formik，Form，Field，ErrorMessage，FieldArray}=window.Formik；
函数应用程序（）{
const[disabled，setDisabled]=React.useState（false）//一些样板代码
函数提交（值）{
console.log（'submit'，值）
}
返回(
(
{
如果（！已禁用）{
返回(
{
e、 预防默认值（）
setFieldValue（'abonents'，e.target.value.split（'，'））
}}value={values.abonents.join（'，'）}>
)
}
返回(
{
values.abonents.map（（值，索引）=>(
{
e、 预防默认值（）
阵列帮助。删除（索引）
}}>
-
))
}
{
e、 预防默认值（）
arrayHelpers.push（“”）
}}>
+
)
}}
/>
提交
{
e、 预防默认值（）
setDisabled（！disabled）
}}>拨动
)}
/>
)
}
ReactDOM.render（，document.querySelector（'#root'））
这是错误的，textarea需要字符串值，fieldarray需要数组值