1

它似乎正确记录了输入字段,但是在提交时,它返回 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>
    )
}
4

0 回答 0