>

응용 프로그램에서 React-Select 를 사용하여 드롭 다운을 만들고 일부를 업데이트하고 있습니다 텍스트 상자. 여기에 매우 간결한 코드가 있습니다.이 코드는 요점과 문제 (찾을 수없는 것)를 가져와야합니다.

import Select from 'react-select';
// other imports - react, bootstrap, ...
class UpdateMe extends Component {
constructor(props) {
     this.state = {
          options: [ 
             {label: 'hello', value: 'greeting'},
             {label: 'goodbye', value: 'farewell'} ],
          selectedOpt: '',
          textOne: '', 
     // other stuff in here not relevant, I believe, to problem
     }
}
handleDropdown(event) {
     this.clearBoxes();
     this.setState({
          selectedOpt: event.value,
          textOne: event.label
     });
} 

// in my render method in all the div's and stuff
<Select isClearable={false} className="dropdown-me"
 value={this.state.selectedOpt}
 options={this.state.options}
 onChange={this.handleDropdown.bind(this)} />

그래서 이것은 내 코드를 간단하게 다시 작성하는 것입니다. 기본적으로 상황은 드롭 다운을 클릭하면하지 않습니다:

<올>
  • 드롭 다운이 표시 될 때 옵션 강조 표시
  • 클릭시 옵션 이름 표시
  • 누군가 가이 문제를 디버깅하도록 도울 수 있다면 고맙겠습니다! 감사합니다

    • 답변 # 1

      문서에 따라 handleDropdown  함수는 직접 selectedOption 걸립니다  매개 변수로 다음과 같은 함수를 작성해야합니다.

      handleDropdown(selectedOption) {
           this.clearBoxes();
           this.setState({
                selectedOpt: selectedOption ,
                textOne: selectedOption.label
           });
      } 
      
      
      

      참고 : react-select   {label: 'hello', value: 'greeting'} 에서 선택한 값이 필요합니다  체재. 값을 selectedOption.value 로만 설정  작동하지 않습니다.

  • 이전 firebase - Cloud Firestore 트리거를 사용하여 경주 문제를 방지하는 방법
  • 다음 powerbi desktop - PowerQuery의 사용자 정의 함수에 대한 매개 변수 옵션