更改表单数据的结构以适应反应中所需的 json POST
Changing structure of form data to suit required json POST in react
我正在尝试创建一个从表单调用的 post 请求,该表单接受来自字段的用户输入,但是 post 请求需要特定的数据格式并且包含以下部分嵌套如下:
{
"Product": {
"name": "App1",
"version": "1.0.0",
"location": "C:\app1"
},
"Owner": {
"name": "John Smith",
"email": "john@smith.com"
},
"Clients": [
{
"name": "client1",
"location": {"address": "123 Jon street", "contact_number": "123456789"}
},
{
"name": "client2",
"location": {"address": "123 Jon street", "contact_number": "123456789"}
}
]
}
除客户列表外,以上所有内容均来自用户在表单中输入的内容。
我的app.js低于
import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import clients from './components/clients';
import axios from "axios";
export default function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => {
axios
.post('/api/product',
data,
{ headers: { 'Content-Type': 'application/json' }}
)
.then(response => {console.log(response.data)})
.catch(error => {console.log(error.data)});
};
//const onSubmit = data => console.log(data);
return (
<div>
<h3>Client listing</h3>
<clients />
<h3>Owner Details</h3>
<form onSubmit={handleSubmit(onSubmit)}>
<label>Owner name: </label><input type="text" placeholder="Owner name" {...register("Ownernane", { required: "Invalid Entry", maxLength: 80 }) } /><p>{errors.Ownernane?.message}</p>
<label>EMail: </label><input type="text" placeholder="Email" {...register("Email", { required: "Invalid Entry", pattern: /^\S+@\S+$/i }) } /><p>{errors.Email?.message}</p>
<h3>Product details</h3>
<label>Name: </label><input type="text" placeholder="name" {...register("name", { required: "Invalid Entry", maxLength: 80 }) } /><p>{errors.name?.message}</p>
<label>Location: </label><input type="text" placeholder="location" {...register("location", { required: "Invalid Entry", maxLength: 100 }) } /><p>{errors.location?.message}</p>
<label>Version: </label><input type="text" placeholder="version" {...register("version", { required: "Invalid Entry", maxLength: 12 }) } /><p>{errors.version?.message}</p>
<input type="submit" />
</form>
</div>
);
}
有人可以为我指出正确的操作方法吗?我不确定它是否是我使用的术语,但我很难找到这方面的说明并猜测这是一个很常见的事情.非常感谢。
不需要改变数据结构,可以react-hook-form
轻松定义字段数组或嵌套字段,这里有一个例子:
<form onSubmit={handleSubmit(onSubmit)}>
<label>Owner name: </label>
<input
type="text"
placeholder="Owner name"
{...register('Owner.name', { required: 'Invalid Entry', maxLength: 80 })}
/>
<p>{errors.Owner?.name?.message}</p>
<label>EMail: </label>
<input
type="text"
placeholder="Email"
{...register('Owner.email', {
required: 'Invalid Entry',
pattern: /^\S+@\S+$/i,
})}
/>
<p>{errors.Owner?.email?.message}</p>
<h3>Product details</h3>
<label>Name: </label>
<input
type="text"
placeholder="name"
{...register('Clients.0.name', { required: 'Invalid Entry', maxLength: 80 })}
/>
<p>{errors.Clients?.[0]?.name?.message}</p>
<label>Location: </label>
<input
type="text"
placeholder="location"
{...register('Clients.0.location', { required: 'Invalid Entry', maxLength: 100 })}
/>
<p>{errors.Clients?.[0]?.location?.message}</p>
<input type="submit" value="submit" />
</form>
使用上述结构,发送到onSubmit的数据将具有以下结构:
{
"Owner":{"name":"value","email":"value"},
"Clients":[{"name":"value","location":"value"}]
}
我正在尝试创建一个从表单调用的 post 请求,该表单接受来自字段的用户输入,但是 post 请求需要特定的数据格式并且包含以下部分嵌套如下:
{
"Product": {
"name": "App1",
"version": "1.0.0",
"location": "C:\app1"
},
"Owner": {
"name": "John Smith",
"email": "john@smith.com"
},
"Clients": [
{
"name": "client1",
"location": {"address": "123 Jon street", "contact_number": "123456789"}
},
{
"name": "client2",
"location": {"address": "123 Jon street", "contact_number": "123456789"}
}
]
}
除客户列表外,以上所有内容均来自用户在表单中输入的内容。 我的app.js低于
import React, {useState} from 'react';
import { useForm } from 'react-hook-form';
import clients from './components/clients';
import axios from "axios";
export default function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => {
axios
.post('/api/product',
data,
{ headers: { 'Content-Type': 'application/json' }}
)
.then(response => {console.log(response.data)})
.catch(error => {console.log(error.data)});
};
//const onSubmit = data => console.log(data);
return (
<div>
<h3>Client listing</h3>
<clients />
<h3>Owner Details</h3>
<form onSubmit={handleSubmit(onSubmit)}>
<label>Owner name: </label><input type="text" placeholder="Owner name" {...register("Ownernane", { required: "Invalid Entry", maxLength: 80 }) } /><p>{errors.Ownernane?.message}</p>
<label>EMail: </label><input type="text" placeholder="Email" {...register("Email", { required: "Invalid Entry", pattern: /^\S+@\S+$/i }) } /><p>{errors.Email?.message}</p>
<h3>Product details</h3>
<label>Name: </label><input type="text" placeholder="name" {...register("name", { required: "Invalid Entry", maxLength: 80 }) } /><p>{errors.name?.message}</p>
<label>Location: </label><input type="text" placeholder="location" {...register("location", { required: "Invalid Entry", maxLength: 100 }) } /><p>{errors.location?.message}</p>
<label>Version: </label><input type="text" placeholder="version" {...register("version", { required: "Invalid Entry", maxLength: 12 }) } /><p>{errors.version?.message}</p>
<input type="submit" />
</form>
</div>
);
}
有人可以为我指出正确的操作方法吗?我不确定它是否是我使用的术语,但我很难找到这方面的说明并猜测这是一个很常见的事情.非常感谢。
不需要改变数据结构,可以react-hook-form
轻松定义字段数组或嵌套字段,这里有一个例子:
<form onSubmit={handleSubmit(onSubmit)}>
<label>Owner name: </label>
<input
type="text"
placeholder="Owner name"
{...register('Owner.name', { required: 'Invalid Entry', maxLength: 80 })}
/>
<p>{errors.Owner?.name?.message}</p>
<label>EMail: </label>
<input
type="text"
placeholder="Email"
{...register('Owner.email', {
required: 'Invalid Entry',
pattern: /^\S+@\S+$/i,
})}
/>
<p>{errors.Owner?.email?.message}</p>
<h3>Product details</h3>
<label>Name: </label>
<input
type="text"
placeholder="name"
{...register('Clients.0.name', { required: 'Invalid Entry', maxLength: 80 })}
/>
<p>{errors.Clients?.[0]?.name?.message}</p>
<label>Location: </label>
<input
type="text"
placeholder="location"
{...register('Clients.0.location', { required: 'Invalid Entry', maxLength: 100 })}
/>
<p>{errors.Clients?.[0]?.location?.message}</p>
<input type="submit" value="submit" />
</form>
使用上述结构,发送到onSubmit的数据将具有以下结构:
{
"Owner":{"name":"value","email":"value"},
"Clients":[{"name":"value","location":"value"}]
}