onChange在選擇反應中不起作用

Question

我只是使用2 select想要通過不同的onChange事件捕獲選擇更改，如下所示：

import React, {Component} from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      contPos: '',
      contAss: ''
    }
    //this.handlechange2 = this.handlechange2.bind(this)
    //this.handlechange3 = this.handlechange3.bind(this)
  }

  handlechange2 = (e) => {
    this.setState({contPos: e.target.value});
  }

  handleChange3 = (e) => {
    this.setState({contAss: e.target.value});
  }

  render() {
    return (
      <div>
      <h1><label>Relationship Contact Position: 
          <select value={this.state.contPos} onChange={this.handleChange2}>
            <option value="CEO">Chief Executive Officer</option>
            <option value="CFO">Chief Financial Officer</option>
            <option value="CHRO">Chief Human Resource Officer</option>
            <option value="CIO">Chief Information Officer</option>
            <option value="CMIS">C-suite minus 1</option>
            <option value="CMO">Chief Marketing Officer</option>
            <option value="COO">Chief Operating Officer</option>
            <option value="CPO">Chief Privacy Officer</option>
            <option value="CTO">Chief Technology Officer</option>
            <option value="ITDM">IT Decision Maker</option>
            <option value="LBE">Line of Business Exec</option>
            <option value="MFO">Marketing / Finance / Operations</option>
            <option value="OCS">Other C-Suite</option>
            <option value="OTHR">Other (not specified)</option>
          </select>
          </label>
      </h1>
      <h1>Relationship Contact Position: <input type='text' value={this.state.contPos} onChange={this.handlechange2} /></h1>
      <h1><label>Relationship Contact Assessment: 
          <select value={this.state.contAss} onChange={this.handleChange3}>
            <option value="CADV">Advocate</option>
            <option value="DTCT">Detractor</option>
            <option value="NTRL">Passive</option>
            <option value="PMTR">Promoter</option>
            <option value="PSDT">Passive Detractor</option>
            <option value="UNKN">Unknow</option>
          </select>
          </label>
      </h1>
      <h1>Relationship Contact Assessment: <input type='text' value={this.state.contAss} onChange={this.handlechange3} /></h1>
      </div>
    )
  }
}

export default App;

奇怪的是，第一選擇（位置）不能更改，始終顯示默認值，但是第二選擇（評估）中的用法相同。 我留下了2個文本來驗證選擇的更改值，同樣的事情，第1個總是顯示默認空白。 有人可以幫忙看看嗎？

順便說一句，在控制台中，第一次選擇有一個錯誤，但是我很困惑，因為我已經添加了onChange處理程序。

警告：道具類型失敗：您向沒有onChange處理程序的表單字段提供了一個value道具。 這將呈現一個只讀字段。 如果該字段是可變字段，請使用defaultValue 。 否則，設置onChange或readOnly 。

Answer 1

如TarunDugar所說的錯字，選擇onChange處理程序僅使用“ this.handleChange2”而不是定義“ this.handlechange2”，並且在控制台或頁面中沒有顯示任何錯誤。再次感謝，TarDugar！ 進行對等編碼和對等審查非常重要。