为什么React告诉我我的材料选择输入没有名称？

tyler 发表于 Dev

泰勒

我正在用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)

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

法案

如果您使用的是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>}
/>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。