react-jsonschema-form を使用してフォームを表示および検証し、「...」構文を持つ行の予期しないトークンエラーで見つかったカスタム検証を作成しています。以下のコードを見つけてください
import React, { Component } from "react";
import { render } from "react-dom";
import Form from "react-jsonschema-form";
const SchemaForm = JSONSchemaForm.default;
let schema = {
type: "string",
title: "FirstName",
minLength: 12,
required: true,
messages: {
required: "Please enter your First name",
minLength: "First name should be > 5 characters"
}
};
const MySchemaForm = props => {
const transformErrors = errors => {
return errors.map(error => {
if (error.schema.messages && error.schema.messages[error.name]) {
return {
...error,
message: error.schema.messages[error.name]
};
}
return error;
});
};
return (
<SchemaForm
{ ...props }
schema={schema}
liveValidate
showErrorList={false}
transformErrors={transformErrors}
/ >
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {formData: {}};
}
onSubmit({formData}) {
this.setState({formData});
}
render() {
return (
<div>
<MySchemaForm formData=""/>
</div>
);
}
}
React.render(<App />,
document.getElementById("app"));
「...error」の行でエラーが発生します。この問題を解決するのを手伝ってくれる人はいますか。
...rest/spread 演算子を使用する場合は、プラグインを使用する必要があります。babel プラグインは次のとおりです。
https://babeljs.io/docs/plugins/transform-object-rest-spread/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加