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个总是显示默认空白。有人可以帮忙看看吗？

顺便说一句，在控制台中，第一次选择时出错，但是我对bcos感到困惑，因为我已经添加了onChange处理程序。

警告：道具类型失败：您向表单字段提供了value道具没有onChange处理程序。这将呈现一个只读字段。如果该字段应可变使用defaultValue。否则，设置 onChange或readOnly。

Answer 1

如TarunDugar所说的错字，选择onChange处理程序仅使用“ this.handleChange2”而不是定义“ this.handlechange2”，并且在控制台或页面中未显示任何错误。再次感谢TarDugar！进行同行编码和同行审查非常重要。

onChange在选择反应中不起作用

1 个答案: