Reactjs 使用控制器对自定义输入作出反应
在提交表单之前，我正在对有效字段使用Reactjs 使用控制器对自定义输入作出反应,reactjs,react-hooks,Reactjs,React Hooks,在提交表单之前，我正在对有效字段使用react hook form。但是，我试图将一个输入更改为react number format，但它没有使用相同的输入样式，并且它不适用于寄存器错误验证 import React, { useState } from 'react'; import { Controller, useForm } from "react-hook-form"; import { Form, Label, Input, Bu
react hook formreact number format寄存器import React, { useState } from 'react';
import { Controller, useForm } from "react-hook-form";
import {
Form,
Label,
Input,
Button
} from 'reactstrap';
import { FormGroup } from '@material-ui/core';
import moment from 'moment';
import DatePicker from "reactstrap-date-picker";
import NumberFormat from 'react-number-format';
const setErrorStyle = (name) => {
return {
borderColor: name ? 'red' : '',
boxShadow: name ? '0 0 1.5px 1px red' : ''
}
}
const Test = () => {
const [ addBill, setAddBill ] = useState({
debitAmt: '',
invoiceNumber: '',
memo: '',
invoiceDate: moment().format('YYYY-MM-DD'),
});
const { register, handleSubmit, errors, control } = useForm();
const submitAddBill = (data) => {
console.log(data);
}
return (
<>
<Form onSubmit={handleSubmit(submitAddBill)}>
<div className="row">
<div className="col-sm-2">
<FormGroup className="mr-10 mb-10">
<Label for="debitAmt" className="mr-sm-10">Debit Amt</Label>
<Controller
as={
<NumberFormat
thousandSeparator={true}
prefix={"$"}
onValueChange={(v) => {
setAddBill({...addBill, debitAmt: v.floatValue === undefined ? '' : v.floatValue})
}}
/>
}
name="debitAmt"
id="debitAmt"
variant="outlined"
defaultValue={addBill.debitAmt}
innerRef={register({ required: true })} aria-invalid={errors.debitAmt ? "true" : "false"}
control={control}
style={setErrorStyle(errors.debitAmt)}
/>
{errors.debitAmt && (
<span style={{ color: "red" }} role="alert">required</span>
)}
</FormGroup>
</div>
<div className="col-sm-2">
<FormGroup className="mr-10 mb-10">
<Label for="invoiceDate" className="mr-sm-10">Invoice Date</Label>
<DatePicker name="invoiceDate" id="invoiceDate"
value={addBill.invoiceDate} onChange={(e) => setAddBill({...addBill, invoiceDate: e ? moment(e).format('YYYY-MM-DD') : ''})}
innerRef={register({ required: true })} aria-invalid={errors.invoiceDate ? "true" : "false"}
style={setErrorStyle(errors.invoiceDate)}
/>
{errors.invoiceDate && (
<span style={{ color: "red" }} role="alert">required</span>
)}
</FormGroup>
</div>
<div className="col-sm-3">
<FormGroup className="mr-10 mb-10">
<Label for="invoiceNumber" className="mr-sm-10">Invoice Number</Label>
<Input type="text" name="invoiceNumber" id="invoiceNumber" placeholder="1234567"
innerRef={register({ required: true })} aria-invalid={errors.invoiceNumber ? "true" : "false"}
value={addBill.invoiceNumber} onChange={(e) => setAddBill({...addBill, invoiceNumber: e.target.value})}
style={setErrorStyle(errors.invoiceNumber)}
/>
{errors.invoiceNumber && (
<span style={{ color: "red" }} role="alert">required</span>
)}
</FormGroup>
</div>
<div className="col-sm-3">
<FormGroup className="mr-10 mb-10">
<Label for="memo" className="mr-sm-10">Memo</Label>
<Input type="text" name="memo" id="memo" placeholder="Memo"
innerRef={register()} aria-invalid={errors.memo ? "true" : "false"}
value={addBill.memo} onChange={(e) => setAddBill({...addBill, memo: e.target.value})}
style={setErrorStyle(errors.memo)}
/>
</FormGroup>
</div>
</div>
<Button type="submit" color="primary" size="sm" className="w-auto">Add Bill</Button>
</Form>
</>
)
}
export default Test;
import React，{useState}来自“React”；
从“react hook form”导入{Controller，useForm}；
进口{
形式，
标签，
输入，
按钮
}来自“反应带”；
从“@material ui/core”导入{FormGroup}；
从“力矩”中导入力矩；
从“reactstrap日期选择器”导入日期选择器；
从“反应数字格式”导入数字格式；
常量setErrorStyle=（名称）=>{
返回{
边框颜色：名称？'red'：''，
boxShadow:名称？'0 1.5px 1px红色'：''0
}
}
常数测试=（）=>{
const[addBill，setAddBill]=useState({
借方：''，
发票号码：“”，
备忘录：''，
发票日期：矩（）.格式（'YYYY-MM-DD'），
});
常量{register，handleSubmit，errors，control}=useForm（）；
const submitadbill=（数据）=>{
控制台日志（数据）；
}
返回(
借方金额
}
name=“debitAmt”
id=“借记卡”
variant=“概述”
defaultValue={addBill.debitAmt}
innerRef={register（{required:true}}）aria invalid={errors.debitAmt？“true”：“false”}
control={control}
style={setErrorStyle（errors.debitAmt）}
/>
{errors.debitAmt&&(
必修的
)}
发票日期
setAddBill（{…addBill，发票日期：e？时刻（e）.format（'YYYY-MM-DD'）：''}
innerRef={register（{required:true}}）aria invalid={errors.invoiceDate？“true”：“false”}
样式={setErrorStyle（errors.invoiceDate）}
/>
{errors.invoiceDate&&(
必修的
)}
发票号码
setAddBill（{…addBill，发票编号：e.target.value}）}
样式={setErrorStyle（errors.invoiceNumber）}
/>
{errors.invoiceNumber&&(
必修的
)}
备忘录
setAddBill（{…addBill，memo:e.target.value}）
style={setErrorStyle（errors.memo）}
/>
添加账单
)
}
导出默认测试；
debitAmt谢谢，NumberFormat组件上不存在prop
innerRefgetInputRef<FormGroup className="mr-10 mb-10">
<Label for="debitAmt" className="mr-sm-10">
Debit Amt
</Label>
<Controller
as={
<NumberFormat
thousandSeparator={true}
prefix={"$"}
onValueChange={(v) => {
setAddBill({
...addBill,
debitAmt: v.floatValue === undefined ? "" : v.floatValue
});
}}
/>
}
name="debitAmt"
id="debitAmt"
variant="outlined"
defaultValue={addBill.debitAmt}
getInputRef={register({ required: true })}
aria-invalid={errors.debitAmt ? "true" : "false"}
control={control}
style={setErrorStyle(errors.debitAmt)}
/>
{errors.debitAmt && (
<span style={{ color: "red" }} role="alert">
required
</span>
)}
</FormGroup>
借方金额
}
name=“debitAmt”
id=“借记卡”
variant=“概述”
defaultValue={addBill.debitAmt}
getInputRef={register（{required:true}）}
aria无效={errors.debitAmt？“true”：“false”}
control={control}
style={setErrorStyle（errors.debitAmt）}
/>
{errors.debitAmt&&(
必修的
)}
示例沙盒您可以创建一个代码沙盒并在此处共享它吗！谢谢。一个奇怪的行为是，当我在代码的另一部分（不是NumberFormat的
onValueChangeaddBill.debitAmt数字格式