Блог

Я создаю форму, похожую на мастера, в React. Я хочу, чтобы он отображал другой выбор только тогда, когда пользователь выбирает опцию в предыдущем выпадающем списке. В настоящее время мой выбор работает, но я использую здесь много крючков useState. Поскольку в конечном итоге я хочу иметь около 10 вариантов выбора, я думаю, что даже 10 вариантов использования могут быть не лучшим вариантом. Не могли бы вы, пожалуйста, проверить мой код и дать мне несколько советов, которые сделали бы его лучше/объяснить, почему такие изменения сделают его лучше?

Ниже я публикую свой код, он работает в codesandbox с загрузкой 4.2.1 и react-select 2.2.0:

 import React, { useState } from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";

const options1 = [
  { label: "1", value: 1 },
  { label: "2", value: 2 }
];

const options2 = [
  { label: "3", value: 3 },
  { label: "4", value: 4 }
];

const options3 = [
  { label: "5", value: 5 },
  { label: "6", value: 6 }
];

const options4 = [
  { label: "7", value: 7 },
  { label: "8", value: 8 }
];

const App = () => {
  const [showSecond, setShowSecond] = useState(false);
  const [showThird, setShowThird] = useState(false);
  const [showFourth, setShowFourth] = useState(false);
  const [showButton, setShowButton] = useState(false);

  const renderSecond = () => {
    if (showSecond) {
      return (
        <div className="form-group row mt-2">
          <label className="col-4">Select 2</label>
          <Select
            onInputChange={updateSecond}
            className="col-8"
            options={options2}
          />
        </div>
      );
    }
  };

  const renderThird = () => {
    if (showThird) {
      return (
        <div className="form-group row mt-2">
          <label className="col-4">Select 3</label>
          <Select
            onInputChange={updateThird}
            className="col-8"
            options={options3}
          />
        </div>
      );
    }
  };

  const renderFourth = () => {
    if (showFourth) {
      return (
        <div className="form-group row mt-2">
          <label className="col-4">Select 4</label>
          <Select
            onInputChange={updateFourth}
            className="col-8"
            options={options4}
          />
        </div>
      );
    }
  };

  const updateFirst = () => {
    // update some data
    setShowSecond(true);
  };

  const updateSecond = () => {
    // update some data
    setShowThird(true);
  };

  const updateThird = () => {
    // update some data
    setShowFourth(true);
  };

  const updateFourth = () => {
    // update some data
    setShowButton(true);
  };

  return (
    <div className="container">
      <div className="col-12">
        <form className="form">
          <div className="form-group row mt-2">
            <label className="col-4">Select 1 </label>
            <Select
              className="col-8"
              onInputChange={updateFirst}
              options={options1}
            />
          </div>
          {renderSecond()}
          {renderThird()}
          {renderFourth()}
        </form>
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 

Поскольку я учусь Реагировать, каждое предложение будет очень оценено!