如何使用 React-Hook-Form 处理更改事件？答案

【问题标题】：How can I handle the change event with React-Hook-Form?如何使用 React-Hook-Form 处理更改事件？
【发布时间】：2021-01-21 01:08:29
【问题描述】：

我正在尝试使用React Hook表单控制器for MethalueSui选择ondchange事件，但是在选择更改呼叫Handlechange事件时，我无法弄清楚如何触发事件。我创建了一个沙箱来复制，我也有单独的Warning: findDOMNode is deprecated in StrictMode 问题，我无法理解如何使用 createRef 来阻止它，但主要问题是 onChange 事件，因为我需要渲染不同的基于 TextFields关闭选择值。

https://codesandbox.io/s/react-hook-form-select-onchange-uiic6

<form onSubmit={handleSubmit(onSubmit)}>
  <Grid container direction="column" spacing={2}>
    <Grid item>
      <FormControl fullWidth variant="outlined" className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Folder Name</InputLabel>
        <Controller
          control={control}
          name="folderSelect"
          onChange={handleChange}
          defaultValue=""
          render={({onChange, value, onBlur, name}) => (
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              onChange={onChange}
              value={value ? value : ''}
              name={name}>
              <MenuItem value="Invoices" key="Invoices">
                Invoices
              </MenuItem>
              <MenuItem value="Statements" key="Statements">
                Statements
              </MenuItem>
              <MenuItem value="Credits" key="Credits">
                Credits
              </MenuItem>
            </Select>
          )}
        />
      </FormControl>
    </Grid>
    <Grid item>
      <TextField
        fullWidth
        label="First Name"
        name="firstName"
        variant="outlined"
        onChange={(e) => console.log(e.target.value)}
        inputRef={register({required: true})}
      />
    </Grid>
    <Button type="submit">Submit</Button>
  </Grid>
</form>;

【问题讨论】：

标签： reactjs material-ui onchange react-hook-form

【解决方案1】：

没有您在代码中定义的 Controller 的 onChange 方法。所以你可以删除它：

<Controller
                    control={control}
                    name="folderSelect"
                    onChange={() => console.log("hellow")} <- this one not required
                    defaultValue=""

我对您的问题的理解是，您希望在 select 值更新后立即触发 handleChange。为此，您可以这样做：

 <Select
                        labelId="demo-simple-select-label"
                        id="demo-simple-select"
                        onChange={(e) => {
                          onChange(e)
                          handleChange(e) <- call handleChange
                        }}
                        value={value ? value : ""}
                        name={name}
                      >

这里是代码和演示：https://codesandbox.io/s/react-hook-form-select-onchange-forked-eqb20?file=/src/App.js:1533-1907

【讨论】：

【解决方案2】：

因此，如果您想在 select 的 onChange 上触发 handleChange，只需将 onChange={onChange} 更改为 onChange={() => handleChange()}。

注意：如果您想删除 findDom 已弃用警告，只需从 ReactDOM.render 中的 ReactDOM.render 中删除 React.StrictMode 标签即可index.js

【讨论】：

感谢您的输入，我知道我可以删除严格模式，但我认为最好不要这样做是有原因的？尝试使用 useRef createRef 但老实说它只是碰巧它会起作用并没有真正理解它，