如何在本机HTML上使用React-Hook-form设置值

Question

我的目标是在项目中使用所有本机HTML元素，并且我目前使用React表单挂钩进行了工作输入和复选框，但我似乎无法获得选择（多个）工作。

具体而言，不起作用的部分是我去更新某些数据时从服务器检索的值的值设置（以其他方式起作用）。

这是我拥有的相关代码：

注意，以下是文件中的实际代码，但是我试图删除与问题无关的所有内容。在原始代码中，还具有从后端获取数据并处理创建和删除操作的功能，以及一些与此问题无关的用户界面内容。

从后端返回的数据是JSON对象，它是我所谓的类型的数组。每种类型都有一个ID，名称和一个子类型数组，该字体还具有ID，名称和一个称为“连接”的值，该值是一个布尔值，可以确定所涉及的类型是否连接到子类型。这里的目标是拥有这些类型的表，然后在该表中单击一行时，您可以通过更改名称和/或更改选择哪些子类型（选定的类型为connected = true = true）来编辑该特定

import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
import { ErrorMessage } from '@hookform/error-message';
import { RootStateOrAny, useSelector, useDispatch } from 'react-redux';
import { updateTicketTypeAction } from '../../actions/ticketActions';

interface ttFormInputs {
  name: string;
  sub_types: [];
}

export default function Ticket() {
  const { 
    register, 
    resetField, 
    formState: { errors }, 
    handleSubmit,
    setValue
  } = useForm<ttFormInputs>();

  const types = useSelector((state: RootStateOrAny) => state.root.ticket.types);


  const onToggleEdit = ((type: any) => {
    setValue('name', type.name) //this does work

    /* this doesn't work

       Note, in both of these tests, I am not even looking at the 'connected' property
       of the subtype.  I'm just trying to pre-select all of them to see if it can be
       done in any way.

    type.sub_types.map((value: any) => {
      setValue('sub_types', value.id, { shouldTouch: true })
    })
    */
   
    /* nor does this...
       
       note: stypes in this case ends up being a simple array of ids
    */
    let stypes = type.sub_types.map((value: any) => (value.id))
    setValue('sub_types', stypes, { shouldTouch: true })
    
  })

  const dispatch = useDispatch()

  const onUpdateTicketType = handleSubmit(async (data: ttFormInputs) => {
    dispatch(updateTicketTypeAction(data))
    resetField("name")
    resetField("sub_types")
  })


  const typeList = types.map((type: any) =>
    <tr key={ type.id }>
      <td>
        { 
          <>
            <input {...register("name", { required: "Name is required"})} />
            <ErrorMessage errors={errors} name="name" />
          </>
        }
      </td>
      <td>
      { 
        <select {...register("sub_types")} multiple>
          {
            type.sub_types.map((value: any) => (
              <option key={value.id} value={value.id}>  // Note, I've also tried selected={value.connected} here, but this did not work either.
                {value.name}
              </option>
            ))
          }
        </select>
      }
      </td>
      <td>
        <input type="submit" />
      </td>
      <td>
        <button onClick={(e) => onDeleteTicketType(e, type.id)}>Delete</button>
      </td>
    </tr>
  );

  return (
    <div>
      <h4 className="pageTitle">Ticket Configuration</h4>
      <form onSubmit={onUpdateTicketType}>
        <table>
          <thead>
            <tr>
              <th>Ticket Type</th>
              <th>Sub-Types</th>
              <th>Parent-Types</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            { types && typeList }
          </tbody>
        </table>
      </form>
    </div>
  );
}

类型要找到任何使用本机HTML选择标签与React-Hok-Form结合使用的方式。似乎每个示例都使用某种UI工具包，例如Bootstrap或其他其他示例，我特别尝试避免使用类似的工具。

可以做到吗？

Answer 1

当然，在为此挣扎了一天并终于在这里发布后，大约10分钟后，我找到了答案。在这里发布，这样别人就不需要经历同样的痛苦。

答案非常接近我在上面示例中已经尝试使用的Ettybes变量的答案。问题在于我正在创建一系列数字，并且选项中的键设置为字符串，因此它们从未匹配。这是我最终做到的：

      let stypes = type.sub_types.map((value: any) => {
        if (value.connected) return value.id.toString()
      })
      setValue('sub_types', stypes, { shouldTouch: true })