1

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

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

警告信息（截图）：

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)

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

4

2 回答 2

4

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

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

此外，您的示例在道具中也有两个注册方法。

于 2020-01-10T10:46:07.753 回答
0

这行不通。这些插件不断更新，无法跟上。我正在使用 react-hook-form 和材料 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>
于 2020-05-10T23:49:17.630 回答