Javascript 在组件内部添加输入使输入获取所有单击事件

我试图创建一个组件，作为一个颜色选择器的功能。单击

.swatch

元素打开popover（其中包含扩展整个屏幕的

.cover

div）。点击盖子（在popover外面）将关闭popover。相当标准的行为（我从中复制了代码）

在我在

.swatch

中添加一个输入标记之前，这一切都很正常，然后无论我在哪里单击，都会触发输入单击事件

这是我在控制台中单击popover外部时得到的结果，例如：

handleClose
renders
click input
handleClick
renders

我的组件

ColorPickerInput.jsx

：

import React from 'react'
import PropTypes from 'prop-types'
import { SketchPicker } from 'react-color'
import styles from './ColorPickerInput.scss'
import tinyColor from 'tinycolor2'

export default class ColorPickerInput extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      displayColorPicker: false,
      color: tinyColor(props.initialColorHex).toRgb(),
      colorHex: props.initialColorHex
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleClose = this.handleClose.bind(this)
  }

  static propTypes = {
    initialColorHex: PropTypes.string,
    inputName: PropTypes.string
  }

  handleClick () {
    console.log('handleClick')
    this.setState({ displayColorPicker: !this.state.displayColorPicker })
  }

  handleChange (color) {
    this.setState({ color: color.rgb })
    this.setState({ colorHex: color.hex })
  }

  handleClose (e) {
    e.stopPropagation() // <-- I tried to add this but makes no difference

    console.log('handleClose')
    this.setState({ displayColorPicker: false })
  }

  render () {
    console.log('renders')
    const { inputName } = this.props
    return (
      <div>
        <div
          className={styles.swatch}
          onClick={this.handleClick}
        >
          <input type="text" readOnly onClick={() => console.log('click input')} /> {/*<--- works fine without this line */}
          <div
            className={styles.color}
            style={{backgroundColor: `rgb(${this.state.color.r}, ${this.state.color.g},${this.state.color.b})`}}
          />
        </div>
        { this.state.displayColorPicker
          ? <div className={styles.popover}>
            <div className={styles.cover} onClick={this.handleClose} />
            <SketchPicker
              color={this.state.color}
              disableAlpha
              onChange={this.handleChange}
            />
          </div>
          : null
        }
      </div>
    )
  }
}

输入没有应用任何异常样式：

---

您可以对子组件的输入使用

stopPropagation（）

，则不会触发父组件的单击事件：

<input type="text" readOnly onClick={(e) => {e.stopPropagation(); console.log('click input');}} /> {/*<--- works fine without this line */}

---

{e.stopPropagation（）；console.log（'click input'）；}/>{/*您可以对作为子组件的输入使用
stopPropagation（）
，则不会触发父组件的clicked事件：

<input type="text" readOnly onClick={(e) => {e.stopPropagation(); console.log('click input');}} /> {/*<--- works fine without this line */}

{e.stopPropagation（）；console.log（'click input'）；}/>{/*您还可以包括jsx吗？@squgeim我这样做了，我真的不明白您指的是什么jsx。对不起，代码没有为我滚动。我现在可以看到它。如果我使用
type=“hidden”
和span（基本上可以模拟输入readonly）我没有这个问题。但它仍然困扰着我为什么会发生这种情况。确实非常有趣。这是一个猜测，但是你能展示一下在输入元素上为
onFocus
和
onBlur
设置事件处理程序的结果吗？它们是什么时候执行的？你能不能也包括jsx？@squgeim我这样做了，我真的不明白jsx是什么您指的是Sorry，代码没有为我滚动。我现在可以看到它。如果我将
type=“hidden”
与span一起使用（基本上可以模拟输入只读）我没有这个问题。但它仍然困扰着我为什么会发生这种情况。确实非常有趣。这是一个粗略的猜测，但您能否显示在输入元素上为
onFocus
和
onBlur
设置事件处理程序的结果。它们何时执行？