react-jsonschema-form button 定制

`react-jsonschema-form` 是一个基于 JSON Schema 的表单生成器，它允许你在 React 应用中动态生成表单。对于定制按钮（通常是在提交表单之前），你可以通过自定义 schema 中的 `button` 或者直接在组件上进行扩展。

4. 具体代码示例[^1]:

{
  "title": "User Registration Form",
  "type": "object",
  "properties": {
    "username": { "type": "string", "title": "Username" },
    "password": { "type": "string", "title": "Password", "format": "password" },
    "submitButton": {
      "type": "object",
      "title": "Submit",
      "properties": {
        "label": {"type": "string", "default": "Register"},
        "onClick": { "type": "function", "description": "Custom action to be executed on click" }
      }
    }
  },
  "required": ["username", "password"]
}

在这个 schema 中，`submitButton` 指定了一个对象，其中包含了按钮的标签(`label`) 和点击事件处理器 (`onClick`)。你可以通过一个函数组件接收这个 `onClick` 函数并执行自己的逻辑：

import React from 'react';
import jsonSchemaForm from 'react-jsonschema-form';

const CustomSubmitButton = ({ onClick }) => (
  <button onClick={onClick}>Click me</button>
);

const App = () => {
  const handleSubmit = (data) => {
    // Handle form submission
  };

  return (
    <jsonSchemaForm
      schema={yourJsonSchema}
      onSubmit={handleSubmit}
      customWidgetIds={{ submitButton: CustomSubmitButton }}
    />
  );
};

export default App;

在这里，`customWidgetIds` 参数告诉 `react-jsonschema-form` 使用自定义组件 `CustomSubmitButton` 替代默认的按钮组件。