根据 select 列表中的数字循环组件 - 反应 js

Question

In my App component, I have a component which returns a select list with 15 option with the numbers 1 to 15. I also have an onChange on the select list which stores the selected number in the App state.

My goal is that when the user selects a number from the select list It'll loop through that number and output a new component that just returns a text input (for example if 9 is chosen, automatically you see 9 input fields). Eventually, the value from each text input will be saved into an array in the App state.

My 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>
);

My select list component

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>

Answer 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()}
   ...
}

Answer 2

You could store an inputCount in your state (updated when onChange is fired) and use that value to create your input list component:

 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>