在子組件中調用檢查功能

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功能將不執行。 在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'));