從按鈕點擊重置

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-call 以更新該特定變量。 看下面的原始例子，

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

這將導致狀態在每次輸入更改時更新，並使用更新后的值重新渲染輸入，當重置按鈕被單擊時事件，因為它也會更改值。