画面の任意の場所をクリックしてカレンダーを非表示にしたい.toogleCalendarはカレンダーアイコン

Question

私はどこでも画面上をクリックするとカレンダーを閉じる... toogleCalendarはカレンダーアクションを制御するカレンダーアイコンです。私はカレンダーを参照（REF）を使用）、画面上の任意の場所をクリックの上

Answer 1

1を閉じる必要があります

 let comp = modal ? 
      <div className={styles.calendarInput}> 
       <span onClick={toogleCalendar}>{value ? Dates.format(date, Dates.formats.americanMediumDate) : null}</span> 
       <div className={visible ? '_common_form__show' : '_common_form__hidden'}> 
        {calendar} 
       </div> 
      </div>: 
      calendar; 
     return (
      <div> 
       <label><Label config={{label, helpText}} /></label> 
       {comp} 
      </div> 
     ); 
    }; 

    const CalendarExtended = compose(
     withState('visible', 'setVisible', false), 
     withHandlers({ 
      toogleCalendar: ({setVisible, visible}) =>() => { 
       setVisible(!visible); 
      } 
     }) 
    )(Calendar);. 

..ユーザーは画面上の任意の場所をクリックした場合ときに、カレンダーを閉じたい、我々はクリックでクラスをベースと得ることができます部門外のイベント。 2）デフォルトでは、カレンダークラスの状態はtrueになり、外側をクリックするとfalseに設定されます。これが役立ちます。

constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     isOpen: true 
 
    }; 
 
    } 
 
    
 
handleClick = (e) => { 
 
    if (this.toogleCalendarClass && 
 
     !this.toogleCalendarClass.contains(e.target)) { 
 
     this.setState({ isOpen: false}); 
 
    } 
 
    } 
 

 

 
componentWillMount =() => { 
 
    document.addEventListener('click', this.handleClick); 
 
    } 
 

 
    componentWillUnmount =() => { 
 
    document.removeEventListener('click', this.handleClick); 
 
    } 
 

 

 
this.toogleCalendarClass = null; 
 
let comp = modal ? 
 
      <div className={styles.calendarInput}> 
 
       <span onClick={toogleCalendar} ref={(input) => { 
 
      this.toogleCalendarClass = input; 
 
     } 
 
     }>{value ? Dates.format(date, Dates.formats.americanMediumDate) : null}</span> 
 
     
 
       <div className={`visible ${this.state.isOpen ? '_common_form__show' : '_common_form__hidden'}`}> 
 
        {calendar} 
 
       </div> 
 
      </div>: 
 
      calendar; 
 
     return (
 
      <div> 
 
       <label><Label config={{label, helpText}} /></label> 
 
       {comp} 
 
      </div> 
 
     ); 
 
    }; 
 

 
    const CalendarExtended = compose(
 
     withState('visible', 'setVisible', false), 
 
     withHandlers({ 
 
      toogleCalendar: ({setVisible, visible}) =>() => { 
 
       setVisible(!visible); 
 
      } 
 
     }) 
 
    )(Calendar);