Блог

Я просто использовал 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;
  

И странная вещь — 1-й выбор (позиция) не может измениться, всегда отображается значение по умолчанию, но то же использование во 2-м выборе (оценка) работает нормально. Я оставил 2 текста для проверки выбранного измененного значения, и то же самое, 1-й всегда показывает пустое значение по умолчанию.
Кто-нибудь может помочь взглянуть?

кстати, в консоли есть ошибка для 1-го выбора, но я был смущен, потому что я уже добавил обработчик onChange.

Предупреждение: Ошибка с типом реквизита: вы предоставили value реквизит для поля формы без onChange обработчика. Это приведет к отображению поля, доступного только для чтения. Если поле должно быть изменяемым, используйте defaultValue . В противном случае установите либо onChange , либо readOnly .

Опечатка, как сказал TarunDugar, обработчик select onChange просто использовал «this.handleChange2», а не определил «this.handlechange2», и react не показал никакой ошибки в консоли или на странице.Еще раз спасибо, TarDugar! очень важно иметь одноранговое кодирование и экспертную оценку.