根据选择列表中的数字循环组件 - 反应js答案

【问题标题】：loop through component based on number in select list - react js根据选择列表中的数字循环组件 - 反应js
【发布时间】：2025-12-07 03:00:02
【问题描述】：

在我的 App 组件中，我有一个组件，它返回一个选择列表，其中包含 15 个选项，数字为 1 到 15。我在选择列表上还有一个 onChange，它将所选数字存储在 App 状态中。

我的目标是，当用户从选择列表中选择一个数字时，它将遍历该数字并输出一个仅返回文本输入的新组件（例如，如果选择 9，您会自动看到 9 个输入字段） .最终，每个文本输入的值都会保存到 App 状态的数组中。

我的 App.js

render() {
return (
  <div className="App">
    <form onSubmit={this.handleSubmit}>
      <Location change={this.changeLocation} value={this.state.location} />
      <Date changeDate={this.handleDate} value={this.state.date} />
      <NumOfTunes
        handleChange={this.handleNumOfTunes}
        value={this.state.numberOfTunes}
      />
      <button type="submit">Generate SetList</button>
      <button type="button" onClick={this.handleReset}>
        Reset
      </button>
    </form>
  </div>
);

我的选择列表组件

const numOfTunes = props => {
  return (
    <div>
      <select onChange={props.handleChange}>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
      </select>
    </div>

【问题讨论】：

你能发布你当前的代码吗
请将您的代码发布到 codeSandbox
const returnInputs = ()=>{ for(let i=0; i{setValues[...values, value ]}/> } }

标签： javascript reactjs loops

【解决方案1】：

const returnInputs (){
   for(let i=0; i< selectedNumber; i++){
      return <input key={i} value={this.state.inputValues[i]} onChange={this.addInputsToList}/>
   }
}

const addInputsToList (e) {
   setState({
    inputValues: [...this.state.inputValues, e.target.value]
   })
}


render(){
   ....
   {this.renderInputs()}
   ...
}

【讨论】：

【解决方案2】：

您可以在您的状态中存储一个inputCount（当onChange 被触发时更新）并使用该值来创建您的输入列表组件：

 class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputCount: 0
    };

    this.onSelectChange = this.onSelectChange.bind(this);
  }

  render() {

    return (
      <div style={containerStyles}>
        <select onChange={this.onSelectChange}>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        {this.state.inputCount > 0 &&
        <div style={inputContainer}>
          {[...Array(Number(this.state.inputCount)).keys() ]
          .map(el =>
            <input value="" />
          )}
        </div>
        }
      </div>
    );
  }

  onSelectChange(e) {
    this.setState(
      ({ inputCount: e.target.value })
    );
  }
}

const containerStyles = {
  display: "block",
  justifyContent: "center",
  flexWrap: "wrap"
};

const inputContainer = {
 display: "flex",
 padding: '1rem',
 flexDirection: "column",
  fontSize: "30px",
  color: "#eec200"
};
ReactDOM.render(
  <Button />,
    document.body
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：