如何在 React 中 select 来自 object 的多个属性

Question

我正在 React 中构建一个搜索栏，用于搜索“SlideData”。我正在使用 object 的“text1”属性进行过滤。最好解析属性（标题、文本 1、文本 2、文本 3）中的所有文本。我将如何搜索每个属性?

中的所有字符串

除此之外，如果搜索的词被突出显示就好了，但我知道那是额外的工作。为清楚起见，举个例子，如果我搜索 kenny（在 text3 属性中），它会显示“kenny”的结果，并且只显示 kenny originated.right 所在的内容，现在它只会过滤文本在文本 1 属性.

const [searchTerm, setSearchTerm] = useState("");


const SlideData = [
  {
    slideIndex: 1,
    title: "My name is Bob",
    text1: "Bob likes to eat hamburgers",
    text2: "Kenny likes to eat hot dogs",
    text3: "Terry likes milkshakes"
  },
  {
    slideIndex: 2,
    title: "My name is Jill",
    text1: "Jill likes to eat hamburgers",
    text2: "Joshua likes to eat hot dogs",
    text3: "Steven likes milkshakes"
  }
]


        <div className="search-results">
          <ul className="search-list">
            {SlideData.filter((item) => {
              if (searchTerm === "") {
                return null;
              } else if (item.text1.toLowerCase().includes(searchTerm.toLowerCase())) {
                return item;
              }
            }).map((item) => (
              <div key={item.slideIndex} style={{ padding: "10px" }}>
                <li className="search-item">{item.text1}</li>
                <a
                  className="search-link"
                  onClick={() => {
                    context.setCurrentSlide(item.slideIndex);
                    setSearchTerm("");
                  }}
                 >
                  Go To Slide {item.slideIndex}
                </a>
              </div>
            ))}
          </ul>
        </div>

Answer 1

理想情况下，您不应在客户端执行搜索操作。但是，在这种情况下，您可以简单地连接所有属性来搜索它们。

<div className="search-results">
  <ul className="search-list">
    {SlideData.filter(item => {
      if (searchTerm === '') {
        return null;
      } else {
        let searchText = item.title + item.text1 + item.text2 + item.text3;
        if (searchText.toLowerCase().includes(searchTerm.toLowerCase())) {
          return item;
        }
      }
    }).map(item => (
      <div key={item.slideIndex} style={{ padding: '10px' }}>
        <li className="search-item">{item.text1}</li>
        <a
          className="search-link"
          onClick={() => {
            context.setCurrentSlide(item.slideIndex);
            setSearchTerm('');
          }}
        >
          Go To Slide {item.slideIndex}
        </a>
      </div>
    ))}
  </ul>
</div>;

如何在 React 中 select 来自 object 的多个属性

How to select multiple properties from object in React

reactjs

object

filter

properties

array.prototype.map