小编Nil*_*aha的帖子

我有这段代码，我正在尝试使用 React-hook-form 连接Headless UI中的Combobox 组件。每当我尝试输入不同的值并选择不同的选项时，都会出现错误消息 - Cannot read properties of undefined (reading 'name')

我尝试了很多不同的变体，但未能使用Comboboxwith register。任何帮助，将不胜感激。我想用它register来完成这项工作，并且不想使用其他Controller方法来实现react-hook-form.

import React from "react";

import { useState } from "react";
import { Combobox } from "@headlessui/react";
import { useForm } from "react-hook-form";

const people = [
  { id: 1, name: "Durward Reynolds" },
  { id: 2, name: "Kenton Towne" },
  { id: 3, name: "Therese Wunsch" },
  { id: 4, name: "Benedict …

我需要突出显示段落中的一些文本，但有一些限制 -

1. 突出显示之外的文本也应与突出显示的文本处于同一水平
2. 如果连续有多个单词，那么它们会受到连续突出显示，只需将整个单词放入标签中即可轻松实现
3. 如果文本移动到下一行，则两行之间的突出显示中应该有一个间隙，而不仅仅是一个矩形补丁
4. 两条线之间应该有足够的距离，以免看起来混乱。

TLDR：我想要与下面链接的图片完全相同的东西。谢谢您的帮助。

文本突出显示结果

这就是我所做的

<p class="introduction">
Hi so<span>This is what I did but not sure how to go from here</span></p>

p.introduction {
  width: 150px;
}

p.introduction span {
  background-color: #f48024;
  color: #1d1d1e;
  border-radius: 25px;
  float: left;
  padding: 0 5px 0 5px;
}