2017-11-22 11 views
1

간단한 드롭 다운을 위해 반응 선택을 사용하고 있습니다. 나는 값을 선택하고 문제없이 내 옵션 목록을 통과하지만, 내가 선택한 옵션을 삭제하려고 할 때마다 나는 없다는 오류를 얻을 수 있습니다 :값 지우기가 작동하지 않습니다.

Uncaught TypeError: Cannot read property 'value' of null 
    at Object.FieldDropDown._this.handleOnChange [as onChange] (bundle.js:102446) 
    at Select.setValue (bundle.js:100361) 
    at Select.clearValue (bundle.js:100437) 
    at Object.ReactErrorUtils.invokeGuardedCallback (bundle.js:28939) 
    at executeDispatch (bundle.js:28723) 
    at Object.executeDispatchesInOrder (bundle.js:28743) 
    at executeDispatchesAndRelease (bundle.js:24125) 
    at executeDispatchesAndReleaseTopLevel (bundle.js:24136) 
    at Array.forEach (<anonymous>) 
    at forEachAccumulated (bundle.js:35156) 

내 구성 요소 구현은 매우 간단하다 :

import React, {Component} from 'react'; 
import PropTypes from 'prop-types'; 
import Select from 'react-select'; 
import 'react-select/dist/react-select.css'; 
import _ from 'lodash'; 

import styles from './FieldDropDown.scss'; 

class FieldDropDown extends Component{ 

    constructor(props){ 
     super(props); 

     this.state = { 
      value: null 
     } 
    } 

    handleOnChange = (chosenValue) => { 
     this.setState({ 
      value: chosenValue.value 
     }); 
    }; 


    render(){ 
     const {options} = this.props; 

     return (
      <Select 
       name="form-field-name" 
       value={this.state.value} 
       options={options} 
       onChange={this.handleOnChange} 
       className={styles.wrapper} 
      /> 
     ); 
    } 
} 

FieldDropDown.propTypes = { 
    options: PropTypes.arrayOf(PropTypes.any) 
}; 

export default FieldDropDown; 
+0

옵션 구조가 값, 레이블 쌍에 있습니까? –

답변

1

handleOnChange 전달 된 값은 실제 값이 아닌 상태 그대로 자신이

this.setState({ 
    value: chosenValue 
}); 

이어야한다.