根据状态中的变量数显示输入字段

Posted 2023-02-22

【中文标题】根据状态中的变量数显示输入字段

【英文标题】：Display input fields based on a variable number in state

【发布时间】：2020-12-16 09:45:09

【问题描述】：

我有以下代码。我在名为 items 的状态下定义了一个 const。这是下拉选择。它的值为 0、1 和 2，它们表示否。家属。

一旦用户选择了这个下拉列表，我就会使用useState 更新dependents 常量中选定下拉列表的值。

我想在下面显示输入字段，允许用户输入dependents 年龄。例如用户在下拉列表中选择 2。我想在下面显示 2 个输入字段，允许用户输入 2 dependents 的年龄。同样，如果我选择 1- 我应该只显示 1 个输入字段。这样，当用户在下拉列表中选择时，它应该动态显示输入字段的数量。

谁能告诉我如何实现它。

function App() 
  const [items] = useState([
     label: "0", value: "0" ,
     label: "1", value: "1" ,
     label: "2", value: "2" 
  ]);
 
  const [dependents, setDependents] = useState("0");
  return (
    <div className="App">
      Select Dependents: 
      <select onChange=e => setDependents(e.currentTarget.value)>
      items.map(( label, value ) => (
       <option key=value value=value>
       label
       </option>
       ))
      
    </select>
    </div>
  );



"

【参考方案1】：

根据选定的值创建一个数组并将其映射以呈现输入：

  <div className="App">
      Select Dependents: 
      <select onChange=e => setDependents(e.currentTarget.value)>
      items.map(( label, value ) => (
       <option key=value value=value>
       label
       </option>
       ))
      
    </select>
     [...Array(+dependents)].map((_,index)=>

         return <input type="text" key=index  />
       )
     
      
    </div>

注意：

[...Array(number)] 创建一个长度等于number 的undefined 项目数组，+number 将字符串转换为数字，如@9​​87654326@ 给出4