子コンポーネントでcheck関数が呼び出されました

Question

カスタムの子コンポーネントを持つカスタムドロップダウンを作成しようとしています。子のカスタムコンポーネント内には、onChangeイベントがあります。

問題は、私がチェックボックスのonChangeをトリガするたびに、ドロップダウンが閉じられることです。

https://codesandbox.io/s/lr677jv7l7

render() { 

    const { className, onOpen, children } = this.props 
    const { openItems, selectedItem } = this.state 

    return (
     <div className={classnames('customDropdown', className)}> 
     <div tabIndex="1" 
      onBlur={() => { this.setState({ openItems: false }) }} 
      onFocus={() => { this.setState({ openItems: true }); onOpen && onOpen() }}> 
      <button className="btn"> 
      {selectedItem} 
      </button> 

      <div className={classnames('items', { 'show': openItems === true, 'hide': openItems === false })}> 
      {children && children} 
      </div> 
     </div> 
     </div> 
    ) 
    } 

Answer 1

あなたは、次の行を取り除くために必要な部分コード： onBlur={() => { this.setState({ openItems: false }) }} それは基本的に言って、そのボタンを包むあなたのdivがフォーカスを失ったときに（たとえば、チェックボックスをクリックしたとき） state.openItems変数をfalseに設定し、ドロップダウンを閉じます。

編集： ここでの作業例は、https://codesandbox.io/s/jnq2rqwr53です。

ぼかしの代わりにonClickを基本的に使用して、ドキュメントにclickイベントを追加すると、ユーザーはいつでもドキュメントの任意の場所をクリックしてhideメソッドを呼び出し、モーダルを閉じます。選択したチェックボックスがチェックされますが、選択後に開いたままにしたい場合は、チェックボックスをオンにしても何も実行しないようにする必要があります（hide）。 hideメソッドの初めに、IDと簡単な条件ガードを使用して行いました。

コードは次のようになります。

Hello.js

import React, { Component } from 'react'; 
import classnames from 'classnames' 

export default class CustomDropdown extends Component { 


    constructor() { 
    super() 

    this.state = { 
     openItems: false, 
     selectedItem: 'Please select' 
    } 

    this.show = this.show.bind(this); 
    this.hide = this.hide.bind(this); 
    } 

    show() { 
    this.setState({openItems: true}); 
    document.addEventListener("click", this.hide); 
    } 

    hide(e) { 
    if (e.target.id === "1" || e.target.id === "2") { 
     return false; 
    } 

    this.setState({openItems: false}); 
    document.removeEventListener("click", this.hide); 
    } 

    render() { 

    const { className, onOpen, children } = this.props 
    const { openItems, selectedItem } = this.state 

    return (
     <div className={classnames('customDropdown', className)}> 
     <div tabIndex="1"> 
      <button className="btn" onClick={this.show}> 
      {selectedItem} 
      </button> 

      <div className={classnames('items', { 'show': openItems === true, 'hide': openItems === false })}> 
      {children && children} 
      </div> 
     </div> 
     </div> 
    ) 
    } 
} 

index.js

import React, { Component } from 'react'; 
import { render } from 'react-dom'; 
import Hello from './Hello'; 
import './styles.css'; 

const styles = { 
    fontFamily: 'sans-serif', 
    textAlign: 'center' 
}; 

class App extends Component { 
    constructor() { 
    super() 
    } 

    changeCheckbox =() => { 
    console.log('something') 
    } 

    render(){ 
    return(
     <div style={ styles }> 
     <Hello> 
      <div> 
      my checkbox 1 
       <input type="checkbox" onChange={this.changeCheckbox} id="1" /> 
      </div> 

      <div> 
      my checkbox 2 
       <input type="checkbox" onChange={this.changeCheckbox} id="2" /> 
      </div> 
     </Hello> 
     </div> 
    ) 
    } 
} 

render(<App />, document.getElementById('root'));