它似乎正确记录了输入字段,但是在提交时,它返回 true,然后在尝试再次提交时返回 false。 显示问题的屏幕截图。
我将 onSubmit 更改为
({ value }) => console.log('Submit', value)
并得到以下结果,似乎当它按预期工作时,它实际上返回了表单字段中的值,但是当验证失败时,没有传递字段中的值。
我处理状态的方式有问题还是表单组件有问题?
const ResponsiveGrid: VFC<Props> = ({children, areas, ...props}) => {
const arrangement = React.useContext(ResponsiveContext) as "xsmall" | "small" | "medium" | "middle";
const row = React.useContext(ResponsiveContext) as "xsmall" | "small" | "medium" | "middle";
const column = React.useContext(ResponsiveContext) as "xsmall" | "small" | "medium" | "middle";
return (
<Box align={"center"}>
<Grid areas={areas[arrangement]} rows={LeadGeneratorGridRowSettings[row]}
columns={LeadGeneratorGridColSettings[column]} {...props}>
{children}
</Grid>
</Box>
);
};
export default function CardDealer() {
const [userInfo, setUserInfo] = React.useState<UserInfo>({env: "101", money: "$9", first: "",last: "",phone: "",email: "",wagers: "",zip: ""});
const [valid, setValid] = React.useState(false);
let environments = ["101", "102"];
let wagers = ["$9", "$99", "999", "$9,999", "99,999", "999,999"]
async function changeHandler(key: string, value: string) {
await setUserInfo(
{
...userInfo,
[key]: value
}
)
}
function submitHandler() {
if (valid)
console.log(userInfo)
else
console.log("It isn't real")
}
const listMapper = fieldNames.map((field, index) =>
<FormField key={index} label={field.label} name={field.name} placeholder={"type here"}
onChange={(event) => changeHandler(event.target.name, event.target.value)}
validate={[{regexp: field.validation.regexp, message: field.validation.message}, field.validation.func]}/>
)
return (
<ResponsiveContext.Consumer>
{size => (
<ResponsiveGrid responsive={true} gap="medium" areas={ResponsiveGridArrangementSettings}>
<Box gridArea="one">
<Heading level={"4"} alignSelf={"center"}>
Environment
</Heading>
<Select options={environments} value={userInfo.env}
onChange={({option}) => changeHandler("env", option)}/>
</Box>
<Box gridArea="two">
<Heading level={"4"} alignSelf={"center"}>
Lead Bucket
</Heading>
<Select options={wagers} value={userInfo.bucket}
onChange={({option}) => changeHandler("bucket", option)}/>
</Box>
<Box gridArea="three">
<Form value={userInfo} validate={"submit"} onSubmit={() => submitHandler}
onValidate={(validationResults) => {
console.log('validationResults = ', validationResults);
console.log('userInfo = ', userInfo)
setValid(validationResults.valid);
}}>
{listMapper}
<Box alignContent={"center"}>
<Button alignSelf={"center"} type={"submit"} primary
style={{"padding": "15px", borderRadius: "10px"}}>
Generate Leads
</Button>
</Box>
</Form>
</Box>
</ResponsiveGrid>
)}
</ResponsiveContext.Consumer>
)
}