为什么 React 告诉我我的 Material Select 输入没有名字？

Question

我正在使用 React 创建一个新表单，其中一个输入是 Material UI 输入。表单效果很好，但控制台在加载表单时显示 Missing name at 警告，即使我在 select 输入和 Material [=25] 的隐藏输入上都输入了名称=] 创建。

<FormControl variant="filled" className={classes.formControl} style={{ width: '100%' }}>
  <InputLabel id="dog-breed-label">Dog Breed</InputLabel>
  <Select
    label="Dog Breed"
    labelId="dog-breed-label"
    name="dogBreed"
    value={defaultDog.dogBreed}
    onChange={event => setBankAccount({ ...dogBreed, dogBreed: event.target.value })}
    inputRef={register({ required: true })}
    variant="filled"
    style={{ width: '100%' }}
    inputProps={{ name: 'dogBreedInput' }}
    inputRef={register({ required: true })}
  >
    <MenuItem value="CHIHUAHUA">Chihuahua</MenuItem>
    <MenuItem value="LABRADOR">Labrador Retriever</MenuItem>
  </Select>
</FormControl>

警告信息（screenshot）：

Missing name at {node: input, value: undefined, focus: ƒ}focus: ƒ focus()node: inputvalue: undefined__proto__: Object 
    in SelectInput (created by InputBase)
    in InputBase (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by FilledInput)
    in FilledInput (created by WithStyles(ForwardRef(FilledInput)))
    in WithStyles(ForwardRef(FilledInput)) (created by Select)
    in Select (created by WithStyles(ForwardRef(Select)))
    in WithStyles(ForwardRef(Select)) (at modal.js:95)
    in Modal (at bankInformation/index.js:146)
    in Anonymous (at demographics/index.js:199)
    in Anonymous (at routes/index.js:16)

我需要添加什么才能避免在控制台中看到此警告？

Answer 1

如果您使用的是 react-hook-form 版本 4，我建议您使用控制器：

https://react-hook-form.com/api/#Controller

下面的代码演示了用法：

<Controller 
  control={control}
  name="dogBreed"
  as={<Select
    label="Dog Breed"
    labelId="dog-breed-label"
    value={defaultDog.dogBreed}
    variant="filled"
    style={{ width: '100%' }}
    inputProps={{ name: 'dogBreedInput' }}
  >
    <MenuItem value="CHIHUAHUA">Chihuahua</MenuItem>
    <MenuItem value="LABRADOR">Labrador Retriever</MenuItem>
  </Select>}
/>

此外，您的示例在 props 中也有两个 register 方法。

Answer 2

这行不通。这些插件不断更新，打破它是不可能跟上的。我正在使用 react-hook-form 和 material ui。我在加载和每次击键时都看到了警告。

<FormControl variant="outlined" fullWidth>
        <InputLabel style={{color: !!errors[name] ? '#f44336' : ''}}>{label}</InputLabel>
        <Controller
            control={control}
            name={name}
            as={
                <Select
                    value={value}
                    name={name}
                    onChange={handleChange}
                    label={label}
                    inputProps={{
                        name: name,
                        ref: register({
                            required: 'Required field',
                        })
                    }}
                    error={!!errors[name]}
                >
                    <MenuItem value="">
                        <em>None</em>
                    </MenuItem>
                    {options.map((key, i) =>
                        <MenuItem key={i} value={key.value}>{key.label}</MenuItem>
                    )}
                </Select>
            }
            rules={{ required: required && "Required field" }}
            defaultValue=""
        />
        <FormHelperText style={{color:'#f44336'}}>
            {!!errors[name] ? <ErrorMessage errors={errors} name={name}/> : ''}
        </FormHelperText>
    </FormControl>

为什么 React 告诉我我的 Material Select 输入没有名字？

Why does React tell me that my Material Select input doesn't have a name?

reactjs

material-ui

react-hook-form