从按钮点击重置

Question

I am trying to reset values on the button click but not able to do so. Don't know what the issue is.

This is my one of the field from form:

       <Grid item xs={5} md={5} lg={5}>
          <InputLabel htmlFor="outlined-adornment-fName" required>
            First Name
          </InputLabel>
          <FormControl
            className={classes.formControl}
            variant="outlined"
            size="small"
          >
            <OutlinedInput
              id="outlined-adornment-fName"
              placeholder="First Name"
              defaultValue={firstName}
            />
          </FormControl>
        </Grid>

This is how i am setting form values:

const [firstName, setFirstName] = React.useState('M');

This is my function for Reset:

const handleClick = () => {
    setTimeout(() => {
      setFirstName('');
    }, 1000);
  };

This is my Reset button:

            <Button
              variant="contained"
              color="primary"
              onClick={handleClick}
              classes={{ root: classes.textTran }}
              style={{
                display: 'flex',
                width: '35%',
                textTransform: 'none',
                borderRadius: 20,
              }}
            >
              Reset
         </Button>

Answer 1

const handleClick = () => {
    setTimeout(() => {
      setFirstName(() => "");
    }, 1000);
  };

Give this a try

Answer 2

You have only mentioned defaultValue to OutlinedInput . Add value and onChange properties so that the new model change will be reflected. You can remove setTimeout function.

 const handleClick = () => { setFirstName(''); }

 <OutlinedInput id="outlined-adornment-fName" placeholder="First Name" value = { firstName } onChange={e => setFirstName(e.target.value)} />

Answer 3

I believe the issue here is that you set the default value of the intput to the state variable, but during runtime the input field doesn't track the state. Value of the input has to be set to the corresponding state variable and an onChange-call has to be setup on order to update that specific variable. Look at the primitve example below,

const DemoForm = () => {
  const [value, setValue] = React.useState('')

  const handleChange = (event) => setValue(event.target.value)  
  const handleReset = () => setValue('')

  return(
    <>
      <form>
        <input value={value} onChange={handleChange} />
      </form>
      <button onClick={handleReset} >Reset</button>
    </>
}

This will cause the state to update on each input change and re-render the input with the updated value, event when the reset button is clicked since it changes value as well.