Reactjs 如何使用材料界面选择与反应钩形式

我使用MUI和React-Hook表单在React中构建了一个表单。我正在尝试创建一个自定义的文本字段元素，用作选择输入。我希望它是一个带有Ref道具的非受控组件。我尝试将inputRef道具作为MUI和React钩子表单文档推荐的方式传递，但没有成功

            <TextField
              id="id"
              name="name"
              select
              native="true"
              className={classes.textField}
              label="label"
              margin="normal"
              variant="outlined"
              inputRef={register({ required: "Choose one option" })}
              error={!!errors.name}
            >
              <MenuItem value="">Choose one option</MenuItem>
              <MenuItem value="3">03</MenuItem>
              <MenuItem value="6">06</MenuItem>
              <MenuItem value="9">09</MenuItem>
              <MenuItem value="12">12</MenuItem>
              <MenuItem value="16">16</MenuItem>
              <MenuItem value="18">18</MenuItem>
            </TextField>

选择一个选项
03
06
09
12
16
18

我发现的一件事是，如果我将本机select与ref一起使用，它工作得很好。
此外，我尝试将inputRef道具更改为SelectProps道具，但它也不起作用。

---

提前感谢。

使用带有react hook表单的Material ui中的Select组件，需要您使用控制器实现自定义逻辑

下面是一个可重用组件，它有望简化在应用程序中使用该选择组件的代码：

import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Select from "@material-ui/core/Select";
import { Controller } from "react-hook-form";

const ReactHookFormSelect = ({
  name,
  label,
  control,
  defaultValue,
  children,
  ...props
}) => {
  const labelId = `${name}-label`;
  return (
    <FormControl {...props}>
      <InputLabel id={labelId}>{label}</InputLabel>
      <Controller
        as={
          <Select labelId={labelId} label={label}>
            {children}
          </Select>
        }
        name={name}
        control={control}
        defaultValue={defaultValue}
      />
    </FormControl>
  );
};
export default ReactHookFormSelect;

从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/Select”导入选择；
从“react hook form”导入{Controller}；
const ReactHookFormSelect=({
名称
标签，
控制
默认值，
儿童
…道具
}) => {
常量labelId=`${name}-label`；
返回(
{label}
);
};
导出默认表单选择；

您可以在应用程序中使用它，如下所示：

埃斯科拉乌马奥普ço
03帕塞拉斯
06帕塞拉斯
09帕塞拉斯
12帕切拉
16帕切拉
18帕切拉

以下是使用此组件更新的代码沙盒，用于信息表单中的选择：

---

这里是我的工作代码，希望能对大家有所帮助，需要使用

setValue

  <TextField
    fullWidth
    inputRef={register({
      name: 'name',
    })}
    select
    onChange={e => setValue('name', e.target.value, true)}
    label={label}
    defaultValue={defaultValue}
  >
    {options.map((option) => (
      <MenuItem key={option.label} value={option.value}>
        {option.label}
      </MenuItem>
    ))}
  </TextField>

setValue（'name'，e.target.value，true）}
label={label}
defaultValue={defaultValue}
>
{options.map（（option）=>(
{option.label}
))}

这里使用本机select，不需要setValue，而是始终使用字符串值

<TextField
    fullWidth
    select
    SelectProps={{
      native: true,
      inputProps: { ref: register, name: 'name' }
    }}
    label={label}
    defaultValue={defaultValue}
  >
    {options.map((option) => (
      <option key={option.label} value={option.value}>
        {option.label}
      </option>
    ))}
  </TextField>

{options.map（（option）=>(
{option.label}
))}

✔ 我遇到了同样的问题，我就是这样解决我的问题的：

<Select ... onChange={e => register({ name: 'academicLevel', value: e.target.value })}/>

寄存器（{name:'academicLevel'，值：e.target.value}）}/>

---

这是一个将材质UI与React hook表单结合使用的示例。您需要在TextField的“inputRef”属性中添加验证。您还需要添加“onChange”函数以保持状态更新shouldValidate'将触发验证

  <TextField
    select
    name='city'
    inputRef={register({ required: true })}
    onChange={e => setValue('city', e.target.value, { shouldValidate: true })}
    label="City"
    defaultValue="">
    {cityList.map((option, index) => (
      <MenuItem key={index} value={option}>
        {option}
      </MenuItem>
    ))}
  </TextField>

  {errors.city && <ErrorText>City is required</ErrorText>}

setValue（'city'，e.target.value，{shouldValidate:true}）
label=“城市”
defaultValue=”“>
{cityList.map（（选项，索引）=>(
{option}
))}
{errors.city&&city是必需的}

当您将react hook表单与material UI一起使用时，不需要使用onChange和setState。仅使用inputRef和所有作品

只需将rester传递给Input Ref

 <Select
   variant="outlined"
   name="reason"
   inputRef={register({ required: true })}
  >

看看Controller：如何处理onChange事件？在这种情况下，我们没有onChange bc，输入由DOM处理，即一个不受控制的组件。是的，正如@YungHK所说，

react hook form

可以处理不受控制的输入。如果您需要表单中输入的值，您可以使用watch:避免以下错误，您需要确保传递有效的defaultValue:

Material UI:组件正在更改要控制的Select的非受控值状态。元件不应从非受控切换到受控（反之亦然）。决定在组件的生命周期内使用受控或非受控选择元素。

Yes Paku这是有效的默认值，谢谢各位。问题是关于使用选择元素