javascript - 在输入 React.js 中搜索时如何显示组件

Question

我正在尝试实现这样的功能，即当我搜索 Jupiter、Earth、Saturn 等名称时，我想按以下顺序显示组件：

1. 木星

2. 地球

3. 土星

我创建了这样的组件：

Earth.js：

<div className="grid grid-cols-2 h-32 border border-gray-200 my-4">
  <div className="relative">
    <img
      className="absolute top-0 left-0 w-full h-32 object-cover"
      src="img/earth.jpeg"
    />
  </div>
  <p className="text-3xl font-bold text-left p-10">Earth</p>
</div>;

这是一些类似于地球组件的组件。

这是我的App.js输入功能：

  const [searchQuery, setSearchQuery] = useState("");
  const handleChange = (event) => {
    event.preventDefault();
    setSearchQuery(event.target.value);
  };

          <div className="md:w-2/3">
            <input
              className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
              id="inline-full-name"
              type="text"
              onChange={(e) => handleChange(e)}
            />
          </div>

标签： javascriptreactjs

Answer 1

您的代码不完整，但我认为这是您想要的：

应用程序.js

import Earth from './components/Earth';
import Jupiter from './components/Jupiter';
import Saturn from './components/Saturn';

const [searchQuery, setSearchQuery] = useState("");
const handleChange = (event) => {
    event.preventDefault();
    setSearchQuery(event.target.value);
};

const loadPlanet = (
    if (searchQuery === "Jupiter") {
      return <Jupiter></Jupiter>
    } else if (searchQuery === "Earth") {
      return <Earth></Earth>
    } else if (searchQuery === "Saturn") {
      return <Saturn></Saturn>
    } else {
      return "";
    }
)

return (
  <div className="md:w-2/3">
    <input
      className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
      id="inline-full-name"
      type="text"
      onChange={(e) => handleChange(e)}
    />
  </div>

  {loadPlanet}
  
)