Question

我试图重置按钮单击时的值，但无法重置。不知道是什么问题。

这是我来自表单的领域之一

       <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

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

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

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

Answer 3

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

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

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

单击按钮重置

3 个答案: