React Select는 클릭 옵션에서 값을 업데이트하지 않습니다.

Question

API 호출 후 옵션이로드 된 React Select 양식이 있습니다. 워크샵의 초기 상태 값이 설정되고 옵션이 양식에서 클릭 된 후 업데이트됩니다. 그러나 선택보기를 업데이트하지 않습니다. 또한 양식을 제출하면 워크샵이 성공적으로 데이터베이스에 저장됩니다. 어떻게해야합니까?

renderForm() { 
    return (
     <section className="col-md-12 col-sm-12"> 
      <form className="col-md-12 col-sm-12" 
        onSubmit={ this.handleSubmit }> 
       // other form-groups 
       <div className="form-group"> 
        <label> 
         Region: 
         <input className="form-control" 
           type="text" 
           value={ this.state.value } 
           onChange={ this.handleRegionChange } required /> 
        </label> 
       </div> 
       <div className="form-group"> 
        <label> 
         Workshop: 
        </label> 
        <Select name="form-field-workshop" 
          value={ this.state.workshop } 
          onChange={ this.handleWorkshopChange } 
          options={ this.renderFormWorkshops() } 
          clearable={ false } 
          searchable={ false } 
          required /> 
       </div> 
       <input className="btn btn-default" 
         type="submit" 
         value="Submit" /> 
      </form> 
     </section> 
    ); 
} 

// handles the change of state when an option is selected 
handleWorkshopChange(value) { 
    this.setState({ 
     workshop: value.label 
    }); 
} 

// displays the options in the Select form 
renderFormWorkshops() { 
    return _.map(this.props.workshops.workshops, (it) => { 
     return (
      { value: it.id, label: it.name } 
     ); 
    }); 
} 

Answer 1

handleWorkshopChange(value) { 
    this.setState({ 
     workshop: value.value 
    }); 
} 

Answer 2

생성자에서 올바르게 설정 했습니까?

constructor(props) { 
    super(props); 

    this.handleWorkshopChange = this.handleWorkshopChange.bind(this); 
} 

당신이 화살표 기능을 사용하지 않는 경우, 당신은 this 방법을 사용하여에 의존하는 상황에 대한 컨텍스트를 바인드해야합니다 여기에서 일어나고있는 몇 가지 상황에 맞는 문제 가능성이 있으며,이 컨텍스트 바인딩하는 올바른 형태입니다.

또한, 여기 길 잃은 괄호가 있습니다