实现From Id输入框值同步至To Id输入框且支持手动修改

要实现输入From Id时自动同步至To Id输入框，同时允许用户按需修改To Id，可根据场景选择以下两种实现方式：

方式一：每次修改From Id都同步覆盖To Id #

这种方式下，无论用户是否手动修改过To Id，只要更新From Id，To Id都会被同步为当前From Id的值：

<Formfield label="From Id">
  <Input 
    value={frmdata.fromid} 
    onChange={(evt) => {
      const newFromId = evt.target.value;
      // 同时更新fromid和toid
      setFrmdata({ ...frmdata, fromid: newFromId, toid: newFromId });
    }} 
  />
</Formfield>
<Formfield label="To Id">
  <Input 
    value={frmdata.toid} 
    onChange={(evt) => {
      setFrmdata({ ...frmdata, toid: evt.target.value });
    }} 
  />
</Formfield>

方式二：用户手动修改To Id后停止同步 #

如果希望用户手动修改To Id后，后续更新From Id不再覆盖To Id，可以新增一个状态标记是否修改过To Id：

// 新增状态，标记用户是否手动修改过To Id
const [hasModifiedToId, setHasModifiedToId] = useState(false);

<Formfield label="From Id">
  <Input 
    value={frmdata.fromid} 
    onChange={(evt) => {
      const newFromId = evt.target.value;
      let newFrmData = { ...frmdata, fromid: newFromId };
      // 仅当用户未修改过To Id时，同步更新toid
      if (!hasModifiedToId) {
        newFrmData.toid = newFromId;
      }
      setFrmdata(newFrmData);
    }} 
  />
</Formfield>
<Formfield label="To Id">
  <Input 
    value={frmdata.toid} 
    onChange={(evt) => {
      setFrmdata({ ...frmdata, toid: evt.target.value });
      // 标记用户已手动修改To Id
      setHasModifiedToId(true);
    }} 
  />
</Formfield>

说明 #

• 方式一逻辑简单，适合需要始终保持From Id与To Id初始同步的场景
• 方式二更灵活，能避免用户手动输入的To Id被后续From Id的修改覆盖

内容的提问来源于stack exchange，提问作者Swapnil