检查按钮是否处于活动状态，然后获取其值以传递按钮

Question

function Input() {
  const [input, setInput] = useState("");
  function handleSearch() {
    let url = "https://google.com/search?q=${input}"
    window.open(url)
  }
  return (
    <div className="input-wrap">
      <input
        type="text"
        className="input__search"
        placeholder="Enter your search..."
        value={input}
        onChange={(e) => setInput(e.target.value)}></input>
      <button
        className="input__search--btn"
        onClick={handleSearch}>
        <i className="fa-solid fa-magnifying-glass"></i>
      </button>
    </div>
  );
}

单击搜索按钮时，将根据输入字段中的值将您重定向到 google 搜索，下面是高级搜索的站点，激活后，链接将在后面添加一个附加链接“https://google.com/search?q=${input}+site%3A${activepage}.com，如何检查一个或多个网站是否处于活动状态，然后传递其name to url

P/s：切换网站的代码

function WebButton({ icon, name }) {
    const [active, setActive] = useState(false);
    function handleToggle() {
        setActive(!active);
    }
        return (
            <button
            className={active ? "websites-btn active" : "websites-btn"}
            onClick={handleToggle}>
            <i className={icon}></i>
            <div className="websites-name">{name}</div> 
    </button>
  );
}

Answer 1

您可以保留根级别状态来收集状态的活动链接。并将其传递给 Input 组件。

1. 更新您的 Input 组件以接受名为 `` 的数组，并更新 handleSearch 以在 Google 搜索中使用 OR 操作。

function Input({ activeLinks }) {
  const [input, setInput] = useState("");
  function handleSearch() {
    if (activeLinks.length > 0) {
      let compundSearchURL = `https://google.com/search?q=${input}`;
      activeLinks.forEach((link, i) => {
        compundSearchURL += `+${i > 0 ? "OR+" : ""}site%3A${link}.com`;
      });
      window.open(compundSearchURL);
    } else {
      window.open(`https://google.com/search?q=${input}`);
    }
  }
  return (
    <div className="input-wrap">
      <input
        type="text"
        className="input__search"
        placeholder="Enter your search..."
        value={input}
        onChange={(e) => setInput(e.target.value)}
      ></input>
      <button className="input__search--btn" onClick={handleSearch}>
        <i className="fa-solid fa-magnifying-glass">Search</i>
      </button>
    </div>
  );
}

2. 接受 WebButton 中名为 toggleActiveLink 的另一个函数和一个名为 value 的字符串，该字符串引用 URL 部分。使用handleToggle函数内的值调用该函数。

function WebButton({ icon, name, toggleActiveLink, value }) {
  const [active, setActive] = useState(false);
  function handleToggle() {
    setActive(!active);
    toggleActiveLink(value);
  }
  return (
    <button
      className={active ? "websites-btn active" : "websites-btn"}
      style={{ color: active ? "blue" : "unset" }}
      onClick={handleToggle}
    >
      <i className={icon}></i>
      <div className="websites-name">{name}</div>
    </button>
  );
}

3. 在主要组件中，您必须创建一个本地状态来处理活动链接。根据给定创建切换函数。如果该值不存在，它将添加该值，否则将其删除。

const urls = [
  { name: "Reddit", value: "reddit" },
  { name: "Quora", value: "quara" },
  { name: "Facebook", value: "facebook" },
  { name: "Stackoverflow", value: "stackoverflow" },
  { name: "Twitter", value: "twitter" }
];

function App() {
  const [activeLinks, setActiveLinks] = useState([]);

  const toggleActiveLink = (link) => {
    const index = activeLinks.indexOf(link);
    if (index < 0) {
      setActiveLinks((prevLinks) => [...prevLinks, link]);
    } else {
      setActiveLinks((prevLinks) => prevLinks.filter((l) => l !== link));
    }
  };
  return (
    <>
      <Input activeLinks={activeLinks} />
      <div>
        {urls.map(({ name, value }) => (
          <WebButton
            name={name}
            value={value}
            toggleActiveLink={toggleActiveLink}
          />
        ))}
      </div>
    </>
  );
}