React Final Form外部获取touched状态及对话框关闭前检测表单变更

嘿，我来帮你搞定这个React Final Form结合Dialog的场景问题！针对你遇到的两个核心痛点，我给你整理了具体的解决方案和代码示例：

一、正确监听表单变更（替代无效的form onChange） #

你遇到的form标签onChange无效的问题，是因为React Final Form的Field组件内部封装了输入逻辑，并不会触发原生表单的onChange事件。更可靠的方式是利用Final Form提供的订阅机制，监听表单的values或touched变化。

具体做法是在MyForm中，通过Form组件的render参数拿到form对象，调用form.subscribe()方法来监听表单状态变化，然后触发父组件传递的onChange回调：

function MyForm({ saveData, onChange, ...props }) {
  return (
    <Form
      onSubmit={saveData}
      render={({ handleSubmit, form }) => {
        // 订阅表单values和touched的变化
        React.useEffect(() => {
          const unsubscribe = form.subscribe(
            ({ values, touched }) => {
              // 判断是否有字段被修改（touched有true即代表有交互变更）
              const isChanged = Object.values(touched).some(Boolean);
              onChange(isChanged);
            },
            { values: true, touched: true } // 指定要监听的状态字段
          );
          return unsubscribe; // 组件卸载时取消订阅
        }, [form, onChange]);

        return (
          <form onSubmit={handleSubmit}>
            {/* 你的Field组件示例 */}
            <Field name="username" component="input" type="text" placeholder="用户名" />
            <Field name="email" component="input" type="email" placeholder="邮箱" />
            <button type="submit">保存</button>
          </form>
        );
      }}
    />
  );
}

二、在表单外部获取touched状态 #

要在Dialog组件（表单外部）拿到touched状态，有两种常用且简洁的方式：

方式1：通过回调同步touched状态到父组件state #

修改onChange的传递逻辑，让子组件把touched状态传回父组件，方便Dialog直接使用：

class Dialog extends Component {
  state = {
    isFormChanged: false,
    formTouched: {} // 存储表单的touched状态
  };

  onFormChange = (isChanged, touched) => {
    this.setState({ isFormChanged: isChanged, formTouched: touched });
  };

  close() {
    if (this.state.isFormChanged) {
      // 显示"您有未保存的更改"提示
      alert("您有未保存的更改，确定要离开吗？");
    } else {
      // 执行关闭弹窗逻辑
      console.log("关闭弹窗");
    }
  }

  render() {
    return (
      <div>
        <MyForm onChange={this.onFormChange} />
        <button onClick={() => this.close()}>关闭弹窗</button>
      </div>
    );
  }
}

// 对应修改MyForm中的subscribe回调
form.subscribe(
  ({ touched }) => {
    const isChanged = Object.values(touched).some(Boolean);
    this.props.onChange(isChanged, touched);
  },
  { touched: true }
);

方式2：使用React Context共享表单状态 #

如果你的组件层级较深，也可以创建一个Context，在MyForm中把form对象放入Context，Dialog组件直接从Context中获取状态：

// 创建表单状态Context
const FormStateContext = React.createContext();

function MyForm({ saveData, ...props }) {
  return (
    <Form
      onSubmit={saveData}
      render={({ handleSubmit, form }) => (
        <FormStateContext.Provider value={form}>
          <form onSubmit={handleSubmit}>
            {/* Field组件 */}
            <Field name="username" component="input" type="text" />
          </form>
        </FormStateContext.Provider>
      )}
    />
  );
}

// 在Dialog中使用Context获取touched状态
class Dialog extends Component {
  static contextType = FormStateContext;

  close() {
    const { touched } = this.context.getState();
    const hasUnsavedChanges = Object.values(touched).some(Boolean);
    if (hasUnsavedChanges) {
      alert("您有未保存的更改");
    } else {
      // 关闭弹窗
    }
  }

  render() {
    return (
      <div>
        <MyForm />
        <button onClick={() => this.close()}>关闭弹窗</button>
      </div>
    );
  }
}

额外优化：精准判断内容是否真的修改 #

如果需要更精准的判断（比如用户点击输入框但没修改内容不算变更），可以对比当前表单值和初始值：

// 在MyForm中传入初始值
function MyForm({ saveData, initialValues, onChange, ...props }) {
  // ...
  form.subscribe(
    ({ values }) => {
      // 对比当前values和初始值，判断是否有实际内容变更
      const isChanged = JSON.stringify(values) !== JSON.stringify(initialValues);
      onChange(isChanged);
    },
    { values: true }
  );
  // ...
}

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