如何在react-jsonschema-form中实现两个字段同步？

要实现limit输入框和limitSlider滑块的同步，核心是通过React状态管理表单数据，并在onChange回调中处理字段间的同步逻辑，具体实现如下：

修改后的完整代码 #

import "./styles.css";
import { useState } from "react";

export default function App() {
  const uiSchema = {
    limitSlider: { "ui:widget": "range" }
  };

  const schema = {
    required: ["limit", "limitSlider"],
    properties: {
      limit: {
        title: "New Limit",
        type: "integer"
      },
      limitSlider: {
        title: "New Limit Range",
        type: "number",
        minimum: 0,
        maximum: 100
      }
    }
  };

  // 用useState管理表单数据，替代常量
  const [formData, setFormData] = useState({ limit: 10, limitSlider: 10 });

  const onChange = ({ formData: updatedValues }) => {
    // 同步两个字段的值：滑块变化时更新输入框，输入框变化时更新滑块
    const synchronizedData = {
      limit: typeof updatedValues.limit !== "undefined" 
        ? updatedValues.limit 
        : Math.round(updatedValues.limitSlider),
      limitSlider: typeof updatedValues.limitSlider !== "undefined"
        ? updatedValues.limitSlider
        : updatedValues.limit
    };
    setFormData(synchronizedData);
  };

  return (
    <MuiForm
      uiSchema={uiSchema}
      schema={schema}
      formData={formData}
      onChange={onChange}
    />
  );
}

关键改动说明 #

• 状态化管理表单数据：使用useState将formData转为响应式状态，确保数据变化时表单自动重新渲染。
• 同步逻辑处理：在onChange回调中判断字段变化来源，双向同步值：
  • 拖动滑块（limitSlider变化）时，将limit设为滑块值的整数（匹配limit的integer类型）
  • 修改输入框（limit变化）时，将limitSlider设为输入框的数值，实现双向联动
• 传递状态到表单：将更新后的formData状态传给MuiForm组件，保证表单始终显示最新同步值

内容的提问来源于stack exchange，提问作者h.m.gh