如何根据用户从选择选项中选择的内容更改 CSS？答案

【问题标题】：How can I change CSS depending upon what user choose from select option?如何根据用户从选择选项中选择的内容更改 CSS？
【发布时间】：2022-11-23 01:10:49
【问题描述】：

如果不将其余五个字段的“显示”设置为“无”，我只想在用户选择“业务”时显示其余五个输入字段

我尝试使用 usestate 钩子，但它给出了错误

【问题讨论】：

请添加您的代码。
请查看How to Ask并使用tour。你的问题需要改进。

标签： reactjs frontend integration

【解决方案1】：

我想你正在寻找这个。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState("");

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <form>
        <select onChange={(e) => setState(e.target.value)}>
          <option value="job">Job</option>
          <option value="business">Business</option>
        </select>

        {state === "business" && (
          <div>
            <input type="text" placeholder="something" />
            <br/>
            <input type="text" placeholder="something" />
            <br/>
            <input type="text" placeholder="something" />
            <br/>
            <input type="text" placeholder="something" />
            <br/>
            <input type="text" placeholder="something" />
          </div>
        )}
      </form>
    </div>
  );
}

从这里查看代码：https://codesandbox.io/s/funny-https-5g2vsg

【讨论】：