reactjs - 如何在 React Js 中有条件地隐藏和显示输入

Question

我知道这种方法在 React js 中不好。但我不知道如何用 React js 实现同样的效果。没有得到这样做的正确方法。我有多个输入，我必须根据从下拉列表中选择的值隐藏和显示这些输入。

我正在为任何想要检查的人制作这个演示代码。 https://codesandbox.io/s/gracious-hertz-k2ttl8?file=/src/App.js:0-1084

App.js

const App = () => {
  const getInput = (e) => {
    let input = e.target.value;
    let data = document.getElementsByClassName(input);
    data.array.forEach((ele) => {
      if (ele.style.display === "none") {
        ele.style.display = "block";
      }
    });
  };
  return (
    <>
      <select onChange={getInput}>
        <option value="Address">Address</option>
        <option value="Name">Name</option>
        <option value="Both">Name && Address</option>
      </select>
      <br />
      <br />

      <input
        className="Address Both"
        type="text"
        name="city"
        placeholder="City"
      />
      <input
        className="Address Both"
        type="text"
        name="pincode"
        placeholder="pincode"
      />

      <br />
      <br />
      <input
        className="Name Both"
        type="text"
        name="firstName"
        placeholder="First Name"
      />
      <input
        className="Name Both"
        type="text"
        name="firstName"
        placeholder="Last Name"
      />
    </>
  );
};

export default App;

Answer 1

您可以使用状态来存储所选值，然后根据该状态呈现输入:

const App = () => {
  const [selected, setSelected] = useState("");

  const getInput = (e) => {
    setSelected(e.target.value);
  };
  return (
    <>
      <select onChange={getInput}>
        <option value="Address">Address</option>
        <option value="Name">Name</option>
        <option value="Both">Name && Address</option>
      </select>
      <br />
      <br />

      {selected === 'Address'&&<input
        className="Address Both"
        type="text"
        name="city"
        placeholder="City"
      />}
      // Similarly for the other inputs
    </>
  );
};