Reactjs 使用react select对钩形进行react

有人有一个带有react-select的react-hook表单的工作样本？在下面，使用id=“accountId”选择有效。然而，我需要它是一个必填字段。我试着加上：

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

但这并不奏效。这是因为Select需要包装在一个控制器中（如果我错了，请纠正我）

因此，我尝试在id=“accountId2”的位置添加控件。但现在我得到了一个错误：

未捕获的TypeError:无法读取未定义的属性“split”

我正在寻找一个小样本，其中选择将与表单和必填字段集成

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

选择要更新的帐户

是的，为了让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 }}