Javascript函数未在表单中呈现

Question

我正在尝试使用多年呈现选择下拉菜单。

我使用一个简单的循环来生成下拉菜单的所有年份，请参阅dateYear()。

如果我把{this.dateYear()}放在{this.state.careerHistoryPositions.map((careerHistoryPosition)之外，但是当我把它放在{this.state.careerHistoryPositions.map((careerHistoryPosition)里时，它呈现正确，但是它呈现select元素，但是不填充年份。

我在控制台中没有收到任何错误。

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

Answer 1

我不认为这是最优雅的解决方案，但是，这是我得到它的工作。问题是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> 
    ); 
    } 
}