使用 react-jsonschema-form 字段事件答案

【问题标题】：use react-jsonschema-form field events使用 react-jsonschema-form 字段事件
【发布时间】：2018-11-06 07:03:02
【问题描述】：

我有一个简单的模式来生成表单。我想在鼠标悬停时对字段执行一些操作。但我不知道如何将鼠标添加到所有字段。通过阅读Documents，我发现表单字段有一些事件。 - 表单字段模糊事件 - 表单字段焦点事件虽然没有任何例子。请帮助我了解在哪里可以设置鼠标悬停事件？这是我的架构：

 "schema":
         {
            "type":"object",
            "properties":{
                "request": {
                    "type": "object",
                    "properties": {
                        "requester": {
                            "type": "string"
                        },
                        "requestDate": {
                            "type": "integer"
                        },
                        "detailList": {
                            "type": "array",
                            "items": {
                                "id": "urn:jsonschema:com:fanap:demo:entity:ItemRequestDetail",
                                "type": "object",
                                "properties": {
                                    "item": {
                                        "id": "urn:jsonschema:com:fanap:demo:entity:ItemClass",
                                        "type": "object",
                                        "properties": {
                                            "name": {
                                                "type": "string"
                                            }
                                        }
                                    },
                                    "requestedAmount": {
                                        "type": "number"
                                    }
                                }
                            }
                        },
                        "description": {
                            "type": "string"
                        },
                        "state": {
                            "id": "urn:jsonschema:com:fanap:demo:entity:CategoryElement",
                            "type": "object",
                            "properties": {
                                "name": {
                                    "type": "string"
                                }
                            }
                        },
                    }
                },
                "processResult": {
                    "type": "object",
                    "properties": {
                        "notificationMessage": { "type": "string" }
                    }
                }
            }
         }

这是我显示生成表单的组件：

class JsonFormWrapper extends React.Component<PropsT> {
render() {
    return (
        <React.Fragment>
            {this.props.jsonResponse ? (
                <Form
                    schema={this.props.jsonResponse.schema}
                    uiSchema={this.props.jsonResponse.uiSchema}
                />
            ) : null}
        </React.Fragment>
    );
  }
 }
 export default JsonFormWrapper;

如何为所有元素设置鼠标悬停？我非常感谢您能提供的任何帮助。

【问题讨论】：

在鼠标悬停事件中你到底想做什么？
我认为这并不重要，但我想在每个鼠标悬停的元素顶部显示一些控制按钮。
我不认为他们提供鼠标悬停事件功能。您可以创建自定义小部件并将鼠标悬停事件添加到该小部件。如果你想要一个代码 sn-p，我可以帮你
你有很好的解决方案，但我有几个组件默认情况下 jsonSchema 有它。例如，我有 checkbox 、 textarea 、 text 、 fieldset ……我想在它们上面显示控制按钮。正如你所说，我应该为所有这些编写自定义小部件。你觉得对吗？如果我将此事件添加到所有 react-jsonSchema 现有小部件然后使用它，也许会更好。我错了吗？

标签： reactjs react-jsonschema-forms

【解决方案1】：

可能是一个 hacky 解决方案，但您可以使用 Field Template 来定义自定义事件，例如鼠标悬停。如果可行，您将必须定义一次，而不是为每个输入字段重复它

【讨论】：