2017-06-22 6 views
1

私は何年もドロップダウンメニューを表示しようとしています。Javascript関数がフォーム内でレンダリングされない

私はdateYear()を参照して、ドロップダウンメニューのすべての年を生成するために、単純なループを使用しています。

{this.state.careerHistoryPositions.map((careerHistoryPosition)の外に{this.dateYear()}を配置すると、正しく配置されますが、{this.state.careerHistoryPositions.map((careerHistoryPosition)の中に配置すると、選択要素がレンダリングされますが、年は設定されません。

コンソールでもエラーは発生しません。

export default class CareerHistoryFormPage extends Component { 
    constructor(props) { 
    super(props); 

    const profileCandidateCollection = props.profileCandidate; 
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions; 

    this.state = { 
     careerHistoryPositions: [{company: '', startDateYear: ''}], 
    }; 
    } 

    dateYear() { 
    var yearDate = ''; 
    for (var i = new Date().getFullYear(); i >= 1975; i--) { 
     yearDate += '<option value="' + i + '">' + i + '</option>'; 
    } 
    $('select').html('<option>Year</option>' + yearDate); 
    } 
} 
render() { 
    return (
    <form onSubmit={this.handleFormSubmit}> 
     {this.state.careerHistoryPositions.map((careerHistoryPosition) => (

     <div key={careerHistoryPosition.uniqueId}> 
      <input 
      type="text" 
      value={careerHistoryPosition.company} 
      onChange={this.handleCompanyNameChange(careerHistoryPosition.uniqueId)} 
      /> 

      <select value={CareerHistoryFormPage.startDateYear} > 
      {this.dateYear()} 
      </select> 

     </div> 
     </form> 
    ); 
    } 
} 
+0

? – bp123

答えて

0

私はこれが最も洗練された解決策ではないと思っています。問題はjqueryでした。それを指摘するための@ nem035に感謝します。提案に何が起こったのか

export default class CareerHistoryFormPage extends Component { 
    constructor(props) { 
    super(props); 

    const profileCandidateCollection = props.profileCandidate; 
    const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions; 

    this.state = { 
     careerHistoryPositions: [{company: '', startDateYear: ''}], 
    }; 
    } 

    getStartDateMonthSelect(careerHistoryPosition) { 
    const monthRange = []; 
    for (let i = 0; i <= 11; i++) { 
     monthRange.push(i); 
    } 
    return (
     <select value={careerHistoryPosition.startDateMonth} onChange={this.handleStartDateMonthChange(careerHistoryPosition.uniqueId)}> 
     <option>Month</option> 
     {monthRange.map(month => (
      <option key={month} value={month}>{moment().month(month).format('MMMM')}</option> 
     ))} 
     </select> 
    ); 
    } 
} 
render() { 
    return (
    <form onSubmit={this.handleFormSubmit}> 
     {this.state.careerHistoryPositions.map((careerHistoryPosition) => (

     <div key={careerHistoryPosition.uniqueId}> 
      <input 
      type="text" 
      value={careerHistoryPosition.company} 
      onChange={this.handleCompanyNameChange(careerHistoryPosition.uniqueId)} 
      /> 

      {this.getStartDateMonthSelect(careerHistoryPosition)} 

     </div> 
     </form> 
    ); 
    } 
} 
関連する問題