Javascript 在Reactjs（材质ui）中交换两个文本字段的值

我有一个包含用户输入的功能组件，它是包含输入状态的类组件的子组件。在子函数组件中，我需要一个可以在两个TextFields（）之间交换值的函数

到目前为止，我所尝试的：

<TextField
     id="outlined-from"
     label="Από"
     className={classes.textField3}
     value={transport_detail[idx].from}
     onChange={handleDynamicChange('from', idx)}
     ref={x => from = x}
/>
<IconButton onClick={()=>{
     var temp = from.value;
     console.log(temp)
     from.value = to.value;
     to.value = temp;
 }}>
     <SyncIcon/>
</IconButton>
<TextField
     id="outlined-to"
     label="Προς"
     className={classes.textField3}
     value={transport_detail[idx].to}
     onChange={handleDynamicChange('to', idx)}
     ref={x => to = x}
 />

from=x}
/>
{
var temp=from.value；
控制台日志（临时）
from.value=to.value；
to.value=温度；
}}>
to=x}
/>

我尝试使用ref，但从文档中看到，它仅用于类组件

---

有人对此有任何解决方案吗？

因为您已经在状态中保存文本字段的值，所以您可以删除ref并更改保存文本的方式。这将使您可以轻松地交换内容

下面是一个例子，向您展示最终结果

就像在您的示例中一样，函数组件获取值和

handleDynamicChange

函数。这将填充文本字段并在文本更改时更新

该按钮只需使用相反的键为每个值调用

handleDynamicChange

：

 handleDynamicChange("to", idx)({ target: { value: transport_detail[idx].from} });
 handleDynamicChange("from", idx)({ target: { value: transport_detail[idx].to} });

这将把from文本字段的值设置为to文本字段的值，反之亦然

---

显然，您需要调整值以适应您的数据结构，但这应该是可行的，不需要引用。

refs也可以在函数组件中使用。查看中的

useRef

挂钩