React中如何实现选择select下拉选项后动态显示对应输入框

你的代码问题出在多元素条件渲染的写法上：在JSX中直接用&&串联多个DOM元素时，会按照JavaScript逻辑与运算的规则，仅返回最后一个为真值的元素，所以选中2、3选项时仅能看到最后一个C字段输入框。

方案1：最小改动适配 #

只需要把同条件下需要展示的多个输入框包裹在React Fragment（空标签<></>）中，替换原有的&&串联写法即可：

{/* 选中1的逻辑无需调整 */}
{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>}
{/* 选中2的逻辑用Fragment包裹两个输入框 */}
{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>
</>}
{/* 选中3的逻辑同理 */}
{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>
</>}

方案2：优化版实现（推荐） #

改用数组管理C字段的状态，通过循环生成输入框，避免重复冗余代码，后续需要扩展更多C字段时仅需调整下拉选项数量即可：

import React, {useState} from 'react';

function Calculo() {
  const [taxa, settaxa] = useState('');
  const [custos, setcustos] = useState('');
  // 用数组统一管理所有C字段值
  const [fcList, setFcList] = useState(['', '', '']);
  const [select, setSelect] = useState(0);
 
  const handleCapacity=(e)=>{
    setSelect(Number(e.target.value));
  }

  // 封装修改单个C字段值的公共方法
  const handleFcChange = (index, value) => {
    const newFcList = [...fcList];
    newFcList[index] = value;
    setFcList(newFcList);
  }

  return (
      <div className=''>
        <div className="input">
          <label>n° </label>
          <select value={select} onChange={handleCapacity}>
            <option value={1}>1</option>
            <option value={2}>2</option>
            <option value={3}>3</option>
          </select>
        </div>
        <div className="input">
          <label htmlFor="loteecocompra">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="custodepedido">B =</label>
          <input className="custodepedido" type="number" id='custodepedido' required="required" value={custos} onChange={(e)=> setcustos(e.target.value)}/>
        </div>  
        {/* 循环生成对应数量的C输入框 */}
        {Array.from({length: select}).map((_, index) => (
          <div className="input" key={index}>
            <label htmlFor={`fluxo${index+1}`}>C<sub>{index+1}</sub> =</label>
            <input 
              className={`fluxo${index+1}`} 
              type="number" 
              id={`fluxo${index+1}`} 
              required="required" 
              value={fcList[index]} 
              onChange={(e)=> handleFcChange(index, e.target.value)}
            />
          </div>
        ))}
      </div>
    );
}

export default Calculo

内容的提问来源于stack exchange，提问作者Mpimenta