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

Question

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

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

应用程序.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

您可以使用 state 存储所选值，然后根据该 state 呈现输入：

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
    </>
  );
};

Answer 2

您可以使用 state 来跟踪选定的下拉项目。

const [selectedItem, setSelectedItem] = useState({
city: false,
pincode: false,
...
})

然后基于 state 显示有条件地放入 JSX 中的输入，类似于以下代码：

{
    selectedItem.city  && 
      <input
        className="Address Both"
        type="text"
        name="city"
        placeholder="City"
      />
}

您也可以对其他输入值遵循相同的操作。

并且不要忘记在 dropDown onChange function 上更新 selectedItem state

Answer 3

我已经在您的代码框中进行了更改，您需要使用条件渲染来显示或隐藏组件。

Answer 4

感谢所有回答并最终帮助我的人，它可以按我的意愿工作，我发现它是额外的“br /”标签，这是代码中的问题

最终代码：

应用程序.js

import { useState } from "react";

const App = () => {
  const [display, setdisplay] = useState({
    city: true,
    pincode: true,
    firstName: true,
    lastName: true
  });

  const getInput = (e) => {
    let input = e.target.value;
    switch (input) {
      case "Address": setdisplay({city: false, pincode: false, firstName: true, lastName: true }); break;
      case "Name": setdisplay({ city: true, pincode: true, firstName: false, lastName: false }); break;
      case "Both": setdisplay({city: false, pincode: false, firstName: false, lastName: false }); break;
      default: setdisplay({});
    }
  };

  return (
    <>
      <select onChange={getInput}>
        <option value="Address">Address</option>
        <option value="Name">Name</option>
        <option value="Both">Both</option>
      </select>
      <br />
      <input
        style={{ display: display.city ? "none" : "inline-block" }}
        className="Address Both"
        type="text"
        name="city"
        placeholder="City"
      />

      <input
        style={{ display: display.pincode ? "none" : "inline-block" }}
        className="Address Both"
        type="text"
        name="pincode"
        placeholder="pincode"
      />

      <input
        style={{ display: display.firstName ? "none" : "inline-block" }}
        className="Name Both"
        type="text"
        name="firstName"
        placeholder="First Name"
      />

      <input
        style={{ display: display.lastName ? "none" : "inline-block" }}
        className="Name Both"
        type="text"
        name="firstName"
        placeholder="Last Name"
      />
    </>
  );
};

export default App;