冒泡事件

编程问答 2022-06-10

问题描述

我有一个reactjs代码块，其中包含一个SelectBox和一个输入组件

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import SelectBox from '../SelectBox';
import Input from '../Input';

const PhoneNumber = props => {
  const {
    className,label,options,selectedCountry,onCountryChange,value,onChange,countryPlaceholder,numberPlaceholder,} = props;

  const inputParamChangeHandler = event => {
    const inputChar = event.target.value;
    onChange(inputChar);
  };

  const selectedOptionChangeHandler = event => {
    const valueSelected = event.value.props.countryCode;
    onCountryChange(valueSelected);
  };

  return (
    <div className={classNames('phone-number',className)}>
      <div className="phone-number__label">{label}</div>
      <div className="phone-number__wrapper" onChange={inputParamChangeHandler}>
        <SelectBox
          size="small"
          value={selectedCountry}
          placeholderText={countryPlaceholder}
          touched={false}
          onChange={selectedOptionChangeHandler}
          isSearchable={false}
          isdisabled={false}
          isClearable={false}
          options={options}
          width="small"
        />
        <Input
          type="number"
          value={value}
          onChange={inputParamChangeHandler}
          placeholder={numberPlaceholder}
        />
      </div>
    </div>
  );
};

PhoneNumber.defaultProps = {
  className: null,label: 'Phone Number',countryPlaceholder: '+880',numberPlaceholder: 'XXXX XXX XXX',options: [],};

PhoneNumber.propTypes = {
  className: PropTypes.string,label: PropTypes.oneOfType([PropTypes.string,PropTypes.node]),options: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.oneOfType([PropTypes.string,value: PropTypes.oneOfType([PropTypes.string,PropTypes.number]),})
  ),countryPlaceholder: PropTypes.oneOfType([PropTypes.string,numberPlaceholder: PropTypes.oneOfType([PropTypes.string,selectedCountry: PropTypes.string.isrequired,onCountryChange: PropTypes.func.isrequired,value: PropTypes.string.isrequired,onChange: PropTypes.func.isrequired,};

export default PhoneNumber;

如果我想冒泡onChange方法的inputParamChangeHandler函数的事件，正确的方法应该是什么？ bubble up the event在JavaScript中到底意味着什么？我应该采用其他方法在当前代码库中实现这一目标，还是可以通过事件冒泡来实现？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dom-eventsevent-bubblingjavascript