根據 select 列表中的數字循環組件 - 反應 js

Question

在我的 App 組件中，我有一個組件返回一個 select 列表，其中包含 15 個選項，數字為 1 到 15。我在 select 列表上還有一個 onChange，它將所選數字存儲在 App Z9ED39E2EA93158EF573ZE 中。

我的目標是，當用戶從 select 列表中選擇一個數字時，它將遍歷該數字和 output 一個僅返回文本輸入的新組件（例如，如果選擇 9，您會自動看到 9 個輸入字段）。 最終，來自每個文本輸入的值將保存到應用程序 state 中的數組中。

我的 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>
);

我的 select 列表組件

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

您可以在 state 中存儲一個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>