React Final Form 输入框失焦时根据输入值联动修改下拉框选中值

核心逻辑说明 #

React Final Form 内置 form.change 官方API可直接修改指定字段的值，无需手动触发另一个字段的DOM onChange事件，修改后表单会自动同步所有绑定对应字段的视图状态。

具体修改步骤 #

• 统一提取下拉框的可选颜色值为常量，方便后续匹配校验和维护
• 将输入框的失焦处理逻辑放到Form组件的render回调内，获取form实例和当前表单值
• 失焦时判断输入内容是否在可选颜色列表中，匹配成功调用form.change('favoriteColor', 输入值)更新下拉字段

完整修改后代码 #

/* eslint-disable jsx-a11y/accessible-emoji */
import React from "react";
import { render } from "react-dom";
import Styles from "./Styles";
import { Form, Field } from "react-final-form";

// 统一提取可选颜色常量
const COLOR_OPTIONS = ["blue", "green", "yellow"];

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const onSubmit = async (values) => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

const App = () => (
  <Styles>
    <h1>React Final Form - 简单示例</h1>
    <Form
      onSubmit={onSubmit}
      render={({ handleSubmit, form, submitting, pristine, values }) => {
        // 颜色输入框失焦处理逻辑
        const handleColorInputBlur = () => {
          const inputColor = values.color?.trim().toLowerCase();
          // 输入内容匹配可选颜色则更新下拉字段值
          if (inputColor && COLOR_OPTIONS.includes(inputColor)) {
            form.change("favoriteColor", inputColor);
          }
        };

        return (
          <form onSubmit={handleSubmit}>
            <div>
              <label>颜色</label>
              <Field name="color">
                {({ input, meta, props }) => (
                  <div>
                    <input
                      name="f"
                      type="text"
                      onChange={input.onChange}
                      onBlur={(e) => {
                        input.onBlur(e); // 保留Field原生失焦逻辑
                        handleColorInputBlur();
                      }}
                      value={input.value}
                    />
                  </div>
                )}
              </Field>
            </div>

            <div>
              <label>最喜欢的颜色</label>
              <Field name="favoriteColor">
                {({ input, meta, props }) => (
                  <div>
                    <select {...input}>
                      <option />
                      {COLOR_OPTIONS.map(color => (
                        <option key={color} value={color}>
                          {color.charAt(0).toUpperCase() + color.slice(1)}
                        </option>
                      ))}
                    </select>
                  </div>
                )}
              </Field>
            </div>

            <pre>{JSON.stringify(values, 0, 2)}</pre>
          </form>
        )
      }}
    />
  </Styles>
);

render(<App />, document.getElementById("root"));

注意点 #

• 调用form.change会自动触发表单状态更新，下拉框绑定了favoriteColor字段，会自动同步选中匹配的选项
• 输入框的onBlur中需要先执行input.onBlur(e)，保留React Final Form Field本身的失焦状态更新逻辑
• 统一管理可选颜色常量，避免后续修改下拉选项时需要同时修改匹配逻辑

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