如何通过 useState 的选择表单激活隐藏的 div？

Question

请理解我只是在学习......

有人可以帮助修改代码，以便当选择“是”选项时，显示表单的隐藏部分以允许额外完成吗？

我尝试使用 usestate 来做到这一点，就像在汉堡包中一样，但它不起作用。 我不知道了，所以我的问题......

这是一个更大形式的片段，全部基于 usestate

import React, { useState } from 'react';

function S() {


    const options = [
        { label: "no", value: "no" },
        { label: "yes", value: "yes" }
    ]

    const [option, setOption] = useState();

    const handleOptionChange = (e) => {
        setOption(e.target.value);
    };

    return (
        <div className="App">
            < div className='container text-center'>
                <h3>Creator device</h3>
                <form>

                    <div className="row mb-3">
                        <label className="col-sm-2 col-form-label" id='finish'>
                            <h5>other device?</h5>
                        </label>
                        <div class="col-sm-10">
                            <select class="form-select" onChange={handleOptionChange}>
                                {options.map((option) => (
                                    <option value={option.value}>{option.label}</option>
                                ))}
                            </select>
                        </div>
                    </div>

                    <div className="row mb-3">
                        <label className="col-sm-2 col-form-label" id='show'>
                            <h5> show other device</h5>
                        </label>
                        <div class="col-sm-10">
                            <input type="group" className="form-control" id="inputMB_sn" />
                        </div>
                    </div>

                </form>
            </div>
        </div>
    );
}

export default S;

Answer 1

您可以使用三元运算符在返回的 jsx 中使用条件渲染。当选项变量值为“yes”时显示该字段，否则为 null。

import React, { useState } from 'react';

function S() {
  const options = [
    { label: "no", value: "no" },
    { label: "yes", value: "yes" },
  ];

  const [option, setOption] = useState();

  const handleOptionChange = (e) => {
    setOption(e.target.value);
  };

  return (
    <div className="App">
      <div className="container text-center">
        <h3>Creator device</h3>
        <form>
          <div className="row mb-3">
            <label className="col-sm-2 col-form-label" id="finish">
              <h5>other device?</h5>
            </label>
            <div class="col-sm-10">
              <select class="form-select" onChange={handleOptionChange}>
                {options.map((option) => (
                  <option value={option.value}>{option.label}</option>
                ))}
              </select>
            </div>
          </div>

          {option === "yes" ? (
            <div className="row mb-3">
              <label className="col-sm-2 col-form-label" id="show">
                <h5> show other device</h5>
              </label>
              <div class="col-sm-10">
                <input type="group" className="form-control" id="inputMB_sn" />
              </div>
            </div>
          ) : null}
        </form>
      </div>
    </div>
  );
}