从单击按钮时重置

Question

我正在尝试重置单击按钮时的值，但无法执行此操作。不知道问题出在哪里。

这是我在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>

这就是我设置表单值的方式：

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

这是我的重置函数：

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

这是我的重置按钮：

            <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);
  };

试一试

Answer 2

您只向OutlinedInput提到了defaultValue。添加value和onChange属性，以便反映新模型的更改。您可以删除setTimeout函数。

​

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

​

​

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

​

Answer 3

我认为这里的问题是，您将intput的默认值设置为state变量，但在运行时，输入字段不会跟踪状态。必须将输入的值设置为相应的状态变量，并且必须设置onChange-call才能更新该特定变量。请看下面的primitve示例，

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>
    </>
}

这将导致状态在每次输入更改时更新，并使用更新的值重新呈现输入，当单击reset按钮时发生事件，因为它也更改了值。