微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

冒泡事件

如何解决冒泡事件

我有一个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 举报,一经查实,本站将立刻删除。