react-final-form で連絡フォームをセットアップしました。問題は、すべてのフィールドが有効な場合にのみフォームの送信を許可する方法がよくわからないことです。
現在、私のフォームはデータを取得し、フィールドが空の場合、または電子メール アドレスが無効な場合に、フィールドの下にエラーを表示します。
私の react-final-form のベースとして、このサンドボックスのコードを使用しました。onSubmitまた、 in<Form/>とonSumbitinの違いがよくわかりません<form>。
質問 1.: すべてのフィールドが有効な場合にのみ handleSubmit を許可するにはどうすればよいですか?
質問 2.: 両方の onSubmit プロパティの違いは何ですか?
これが私のコードです:
import React from 'react';
import { Form, Field } from "react-final-form";
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const onSubmit = async values => {
await sleep(300);
window.alert(JSON.stringify(values, 0, 2));
};
export class ContactPage extends React.Component {
constructor(props) {
super(props);
this.handleSubmit=this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
console.log(this.firstName.value);
//Setting up values for fetch body
const firstName = this.firstName.value;
const email = this.email.value;
const subject = this.subject.value;
const message = this.message.value;
fetch('/contact/send', {
method:'POST',
headers:{
'Accept':'application/json, text/plain, */*',
'Content-Type':'application/json'
},
body:JSON.stringify({
firstName:firstName,
email:email,
subject:subject,
message:message,
}),
})
.then(res=>res.json())
.then(console.log('here'))
.then(data=>console.log(data))
.catch(err=>console.log(err));
//Cleaning up data from form
this.firstName.value="";
this.email.value="";
this.subject.value="";
this.message.value="";
};
render() {
return (
<div className="contact">
<div className="contact__form">
<Form
onSubmit={onSubmit}
validate={values => {
const errors = {};
if (!values.firstName) {
errors.firstName = "Required";
}
if (!values.subject) {
errors.subject = "Required";
}
if (!values.email) {
errors.email = "Required";
} else if(!values.email.match( /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)) {
errors.email = "Please enter a valid e-mail adress"
}
if (!values.message) {
errors.message = "Required";
}
return errors;
}}
render={({ handleSubmit, submitting, values}) => (
<form onSubmit={this.handleSubmit}>
<Field name="firstName">
{({ input, meta }) => (
<div>
<input {...input}
type="text"
placeholder="Name"
ref={(ref) => {this.firstName = ref}}
/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="subject">
{({ input, meta }) => (
<div>
<input {...input}
type="text"
placeholder="Subject"
ref={(ref)=>{this.subject = ref}}
/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="email">
{({ input, meta }) => (
<div>
<input {...input}
type="email"
placeholder="E-mail"
ref={(ref) => {this.email = ref}}
/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="message">
{({ input, meta }) => (
<div>
<textarea {...input}
type="text"
placeholder="Message"
ref={(ref) => {this.message = ref}}
/>
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<div className="buttons">
<button type="submit" disabled={submitting}>
Submit
</button>
</div>
</form>
)}
/>
</div>
</div>
);
}
}
export default (ContactPage);