使用 onBlur 而不是 onChange 时重置表单

Question

我的表单有很多延迟，因为要为用户处理大量的状态以及大量的工作职位等。我试图通过将 onChange 切换到 onBlur 来消除这种延迟，这很好用.唯一的问题是我的表单不再设置为 InitialState（空字符串）。我还有一个提交按钮，在填写所有输入之前我一直保持无效。由于onblur，它一直无效，直到我点击离开表格。有没有办法在使用 onBlur 时仍然可以重置表单？并且在我点击离开表单之前，是否有人可以解决我的按钮仍然无效的问题。我的输入代码如下：

handleSubmit 函数：

  const handleSubmit = async e => {
    e.preventDefault()
    setIsLoading(true)
    const fireToken = await localStorage.FBIdToken
    await axios
      .post(`/job`, formData, {
        headers: {
          Authorization: `${fireToken}`
        }
      })
      .then(res => {
        setOpen(true)
        setMessage(res.data)
        fetchUser()
        setIsLoading(false)
        setIsModalOpen(false)
        setFormData(INITIAL_STATE)
      })
      .catch(err => {
        setErrors(err.response.data)
        console.log(err)
        setIsLoading(false)
      })
  }

表格代码：

import React from 'react'

// components
import SelectStatus from './SelectStatus'

// Material UI Stuff
import CircularProgress from '@material-ui/core/CircularProgress'
import Typography from '@material-ui/core/Typography'
import TextField from '@material-ui/core/TextField'
import CardContent from '@material-ui/core/CardContent'
import Button from '@material-ui/core/Button'
import Card from '@material-ui/core/Card'
import Grid from '@material-ui/core/Grid'

// JobCardStyles
import useJobCardStyles from '../styles/JobCardStyles'

const NewJobForm = React.forwardRef(
  ({ handleSubmit, formData, handleInputChange, isloading }, ref) => {
    const { company, position, status, link } = formData
    const isInvalid = !company || !position || !link || !status || isloading

    const classes = useJobCardStyles()
    return (
      <Card className={classes.card}>
        <CardContent className={classes.content}>
          <form noValidate onSubmit={handleSubmit} className={classes.form}>
            <Grid
              container
              spacing={2}
              alignItems="center"
              justify="space-between"
            >
              <Grid item sm="auto" xs={12} className={classes.grid}>
                <Typography>New</Typography>
                <Typography>Job</Typography>
              </Grid>
              <Grid item sm={3} xs={12} className={classes.grid}>
                <TextField
                  className={classes.jobField}
                  margin="normal"
                  fullWidth
                  id="company"
                  type="company"
                  label="Company"
                  name="company"
                  autoComplete="company"
                  defaultValue={company}
                  onBlur={handleInputChange('company')}
                />
              </Grid>
              <Grid item sm={3} xs={12} className={classes.grid}>
                <TextField
                  className={classes.jobField}
                  margin="normal"
                  fullWidth
                  id="position"
                  type="position"
                  label="Position"
                  name="position"
                  autoComplete="position"
                  defaultValue={position}
                  onBlur={handleInputChange('position')}
                />
              </Grid>
              <Grid item sm={2} xs={12} className={classes.grid}>
                <SelectStatus
                  status={status}
                  handleInputChange={handleInputChange}
                />
              </Grid>
              <Grid item sm={2} xs={12} className={classes.grid}>
                <TextField
                  className={classes.jobField}
                  margin="normal"
                  fullWidth
                  id="link"
                  type="text"
                  label="Link"
                  name="link"
                  autoComplete="link"
                  defaultValue={link}
                  onBlur={handleInputChange('link')}
                />
              </Grid>
              <Grid item sm={1} xs={12} className={classes.grid}>
                <Button
                  fullWidth
                  type="submit"
                  variant="contained"
                  color="primary"
                  disabled={isInvalid}
                  className={classes.submit}
                  disableElevation
                >
                  Submit
                  {isloading && (
                    <CircularProgress size={30} className={classes.progress} />
                  )}
                </Button>
              </Grid>
            </Grid>
          </form>
        </CardContent>
      </Card>
    )
  }
)

export default NewJobForm

Answer 1

尝试制作另一个函数来包装多个函数。

const NewJobForm = React.forwardRef(
    //other logic

    const reset = () => {//your reset function logic}

    //ver 1
    const handleOnBlur = (fn, relatedParam) => {
     reset();
     fn(relatedParam);
    }

    //ver 2
    const handleOnBlur = (relatedParam) => {
     reset();
     handleInputChange(relatedParam);
    }

    return (
      <TextField
         //other props
         onBlur={() => handleOnBlur('company')}
      />
    )