反应挂钩形式与反应 select

Question

有人有一个带有 react-select 的 react-hook-form 的工作样本？在下面，带有 id="accountId" 的 Select 有效。但是我需要它成为必填字段。我尝试添加：

innerRef={register({ required: true })}

但这没有用。据我所知，这是因为 Select 需要包装在控制器中（如果我错了请纠正我）。

所以我尝试在 id="accountId2" 处添加控制器。但现在我得到错误：

Uncaught TypeError: Cannot read property 'split' of undefined

我正在寻找一个小示例，其中 Select 将与表单和必填字段集成。

<Container>
    
  <Form onSubmit={handleSubmit(onSubmit)}>
  <FormGroup>
    
    <div>
      <Controller
        as={<Select
          name="accountId2"
          id="accountId2" />}
        options={options}                    
        control={control}            
      />
    </div>
  </FormGroup>

  <FormGroup>
    <Label for="exampleCheckbox">Choose account to update</Label>
    <div>
      <Select
        name="accountId"
        id="accountId"
        innerRef={register({ required: true })}
        isDisabled={isNewAccount}
        ref={selectInputRef}
        isClearable={true}
        placeholder="Search for an existing account number or click new account below"
        label="Single select"
        options={options}
        defaultValue=""
      />
    </div>

Answer 1

是的，为了 Select 使用 RHF，您需要将它包装在这样的控制器中。

                <Controller
                  as={
                    <Select>
                      {options.map((option, index) => (
                        <MenuItem key={index} value={option}>
                          {option}
                        </MenuItem>
                      ))}
                    </Select>
                  }
                  name={options_name}
                  control={control}
                  defaultValue=""
                  rules={{ required: true }}
                />

因此，通过向控制器添加以下属性，它对我有用。

rules={{ required: true }}

希望这能回答您的问题。

Answer 2

如果你使用的是react-hook-form: "^7.19.1"，可以如下使用。

                         <Controller
                            control={control}
                            name="test"
                            render={({
                                field: { onChange, onBlur, value, name, ref },
                                fieldState: { invalid, isTouched, isDirty, error },
                                formState,
                            }) => (
                                <Select
                                    onBlur={onBlur}
                                    onChange={onChange}
                                    inputRef={ref}
                                    className={classes.textField}
                                    fullWidth
                                    input={<Input id="name" />}
                                    defaultValue={"science"}
                                >
                                    {tags.map((tag, index) => (

                                        <MenuItem key={index} value={tag}>
                                            {tag}
                                        </MenuItem>
                                    ))}

                                </Select>
                            )}
                        />

反应挂钩形式与反应 select

react-hook-form with react select

reactjs

react-select

react-hook-form