在子组件中调用检查功能

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'));