Js - JSX uygulamasında giriş metin alanlarını dinamik olarak nasıl oluşturabilirim?

Question

Ben tepki vermek için oldukça yeni, birbiriyle çok benzer 6 giriş alanı oluşturmak için bir senaryo ile karşılaştım. Şu anda ben

render() { 
    return (
     <div> 
      <p> 
       <label htmlFor="answer1">Answer:</label><br/> 
       <input 
       type="text" 
       name="answer1" 
       id="answer1" 
       className="answer" 
       value={this.state.answer1} 
       onChange={this._handleChange} 
       /> 
      </p> 
      <p> 
       <input 
       type="text" 
       name="answer2" 
       id="answer2" 
       className="answer" 
       value={this.state.answer2} 
       onChange={this._handleChange} 
       /> 
      </p> 
      <p> 
       <input 
       type="text" 
       name="answer3" 
       id="answer3" 
       className="answer" 
       value={this.state.answer3} 
       onChange={this._handleChange} 
       /> 
      </p> 
      <p> 
       <input 
       type="text" 
       name="answer4" 
       id="answer4" 
       className="answer" 
       value={this.state.answer4} 
       onChange={this._handleChange} 
       /> 
      </p> 
      <p> 
       <input 
       type="text" 
       name="answer5" 
       id="answer5" 
       className="answer" 
       value={this.state.answer5} 
       onChange={this._handleChange} 
       /> 
      </p> 
      <p> 
       <input 
       type="text" 
       name="answer6" 
       id="answer6" 
       className="answer" 
       value={this.state.answer6} 
       onChange={this._handleChange} 
       /> 
      </p> 
     </div> 
    ); 
} 

kod çirkin ve gereksiz, sınıfının benim hale yönteminde böyle bir şey var, ben dinamik olarak bu yapabileceğini zaten var mı?

Answer 1

Nasıl (sadece işlemek yöntemini gösteren) böyle bir Answer bileşeni tanımlama hakkında:

render() { 
    return (
    <p> 
     <label htmlFor={this.props.name}>Answer:</label> 
     <input 
      type="text" 
      name={this.props.name} 
      className="answer" 
      value={this.props.value} 
      onChange={this.props.handleChange} 
     /> 
    </p> 
); 
} 

Ve sonra ana bileşeni üzerinde sadece gibi içe ve kullanmak:

var Answer = require('./answer.js'); 
//.. 

render() { 
    return (
     <div> 
      <Answer name="answer1" value={this.state.answer1} handleChange={this._handleChange} /> 
      <Answer name="answer2" value={this.state.answer2} handleChange={this._handleChange} /> 
      <Answer name="answer3" value={this.state.answer3} handleChange={this._handleChange} /> 
      // add all your Answer components 
     </div>      
    ); 
} 

ardından Thylossus önerisi, burada map:

var Answer = require('./answer.js'); 
//... 

render() { 
    // this is supposing you've got an answers array of { name: ..., value: ...} object 
    var answers = this.state.answers.map(function(a) { 
    return(<Answer name={a.name} value={a.value} handleChange={this._handleChange} />) 
    }); 
    return (
    <div> 
     { answers } 
    </div>      
); 
}