React Hook Form onChange Select Materialui

Любая помощь / указатели приветствуются

Я пытаюсь выяснить событие onChange с помощью контроллера формы реагирования на крючок для выбора материала, но я не могу понять, как вызвать событие, когда выберите изменения для вызова события handleChange. Я создал песочницу для репликации, где у меня также есть отдельная проблема с предупреждением: findDOMNode устарел в StrictMode, и я не могу понять, как использовать createRef, чтобы остановить это, но основная проблема - событие onChange, поскольку мне нужно отображать другие текстовые поля на основе значения Select. 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 react-hook-form onchange
person Paul McInerney    schedule 06.10.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Не существует onChange метода для Controller, как вы определили в своем коде. Так что вы можете удалить это так:

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

Насколько я понимаю, по вашему вопросу вы хотите активировать handleChange, как только значение select обновится. Для этого можно сделать так:

 <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

person Shubham Verma    schedule 06.10.2020
comment
Большое спасибо, всегда что-то простое, когда на него указывалось, я пробовал что-то подобное, но, очевидно, не правильно, очень ценю быстрый ответ - person Paul McInerney; 06.10.2020

arrow_upward
0
arrow_downward

Поэтому, если вы хотите активировать handleChange при выборе onChange, просто измените onChange={onChange} на onChange={() => handleChange()}.

Примечание. Если вы хотите удалить предупреждение о том, что findDom не рекомендуется, просто удалите тег React.StrictMode из ReactDOM.render в index.js

person Piyush Rana    schedule 06.10.2020
comment
спасибо за ввод, я знаю, что могу удалить strictmode, но я решил, что лучше не делать этого по какой-то причине? попытался использовать useRef createRef, но, честно говоря, он просто менял, это сработает, не понимаю, - person Paul McInerney; 06.10.2020