在 React js 中选择选择后如何显示输入

Question

我正在尝试在选择中选择选项后显示输入字段，但它们仅单独显示

我设法只单独显示每个字段“C”，但是当您选择字段 3 时，会出现“C”1、2 和 3

import React, {useState} from 'react';

function Calculo() {
 
  const [taxa, settaxa] = useState('');
  const [custos, setcustos] = useState('');
  const [FC1, setFC1] = useState('');
  const [FC2, setFC2] = useState('');
  const [FC3, setFC3] = useState('');


const [select,setSelect]= useState();
 
const handleCapacity=(e)=>{
 setSelect(e.target.value);
}
  return (
      <div className=''>
        
              <div className="input">
                <label>n° </label>
              <select value={select} onChange={handleCapacity}>
                    <option >1</option>
                    <option >2</option>
                    <option >3</option>

              </select>
              </div>
            <div className="input">
              <label htmlfor="nome">A =</label>
              <input className="loteecocompra" type="number" id='loteecocompra' required="required"value={taxa} onChange={(e)=> settaxa(e.target.value)}/>
            </div>  
            <div className="input">
              <label htmlfor="nome">B =</label>
              <input className="custodepedido" type="number" id='custodepedido' required="required" value={custos} onChange={(e)=> setcustos(e.target.value)}/>
            </div>  
            {select==="1"&& <div className="input">
              <label htmlfor="nome">C<sub>1</sub> =</label>
              <input className="fluxo1" type="number" id='fluxo1' required="required" value={FC1} onChange={(e)=> setFC1(e.target.value)}/>
            </div>}
            {select==="2"&& <div className="input">
              <label htmlfor="nome">C<sub>1</sub> =</label>
              <input className="fluxo1" type="number" id='fluxo1' required="required" value={FC1} onChange={(e)=> setFC1(e.target.value)}/>
            </div> &&
            <div className="input">
              <label htmlfor="nome">C<sub>2</sub>  =</label>
              <input className="fluxo2" type="number" id='fluxo2' required="required" value={FC2} onChange={(e)=> setFC2(e.target.value)}/>
            </div>}
            {select==="3"&&
            <div className="input">
              <label htmlfor="nome">C<sub>1</sub> =</label>
              <input className="fluxo1" type="number" id='fluxo1' required="required" value={FC1} onChange={(e)=> setFC1(e.target.value)}/>
            </div> &&
            <div className="input">
              <label htmlfor="nome">C<sub>2</sub>  =</label>
              <input className="fluxo2" type="number" id='fluxo2' required="required" value={FC2} onChange={(e)=> setFC2(e.target.value)}/>
            </div>&&
            <div className="input">
              <label htmlfor="nome">C<sub>3</sub>  =</label>
              <input className="fluxo3" type="number" id='fluxo3' required="required" value={FC3} onChange={(e)=> setFC3(e.target.value)}/>
            </div>}

        </div>
    );
}

export default Calculo

我正在尝试在选择中选择选项后显示输入字段，但它们仅单独显示

这是我尝试制作的代码

Answer 1

检查一下：

function Calculo() {
  const [taxa, settaxa] = useState("");
  const [custos, setcustos] = useState("");
  const [FC1, setFC1] = useState("");
  const [FC2, setFC2] = useState("");
  const [FC3, setFC3] = useState("");
  const [select, setSelect] = useState([]);

  const handleCapacity = (e) => {
    if (!e.target.value) {
      setSelect([]);
      return;
    }

    if (select.includes(e.target.value)) {
      setSelect((value) => value.filter((val) => val !== e.target.value));
    } else {
      setSelect((value) => [...value, e.target.value]);
    }
  };

  return (
    <div className="">
      <div className="input">
        <label>n° </label>
        <select value={select} onChange={handleCapacity} multiple>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
      <div className="input">
        <label htmlFor="nome">A =</label>
        <input
          className="loteecocompra"
          type="number"
          id="loteecocompra"
          required="required"
          value={taxa}
          onChange={(e) => settaxa(e.target.value)}
        />
      </div>
      <div className="input">
        <label htmlFor="nome">B =</label>
        <input
          className="custodepedido"
          type="number"
          id="custodepedido"
          required="required"
          value={custos}
          onChange={(e) => setcustos(e.target.value)}
        />
      </div>
      {select.includes("1") && (
        <div className="input">
          <label htmlFor="nome">
            C<sub>1</sub> =
          </label>
          <input
            className="fluxo1"
            type="number"
            id="fluxo1"
            required="required"
            value={FC1}
            onChange={(e) => setFC1(e.target.value)}
          />
        </div>
      )}
      {select.includes("2") && (
          <div className="input">
            <label htmlFor="nome">
              C<sub>1</sub> =
            </label>
            <input
              className="fluxo1"
              type="number"
              id="fluxo1"
              required="required"
              value={FC1}
              onChange={(e) => setFC1(e.target.value)}
            />
          </div>
        ) && (
          <div className="input">
            <label htmlFor="nome">
              C<sub>2</sub> =
            </label>
            <input
              className="fluxo2"
              type="number"
              id="fluxo2"
              required="required"
              value={FC2}
              onChange={(e) => setFC2(e.target.value)}
            />
          </div>
        )}
      {select.includes("3") && (
          <div className="input">
            <label htmlFor="nome">
              C<sub>1</sub> =
            </label>
            <input
              className="fluxo1"
              type="number"
              id="fluxo1"
              required="required"
              value={FC1}
              onChange={(e) => setFC1(e.target.value)}
            />
          </div>
        ) && (
          <div className="input">
            <label htmlFor="nome">
              C<sub>2</sub> =
            </label>
            <input
              className="fluxo2"
              type="number"
              id="fluxo2"
              required="required"
              value={FC2}
              onChange={(e) => setFC2(e.target.value)}
            />
          </div>
        ) && (
          <div className="input">
            <label htmlFor="nome">
              C<sub>3</sub> =
            </label>
            <input
              className="fluxo3"
              type="number"
              id="fluxo3"
              required="required"
              value={FC3}
              onChange={(e) => setFC3(e.target.value)}
            />
          </div>
        )}
    </div>
  );
}