时间戳

首页 > 解决方案 > React Remove Bootstrap 按钮轮廓

javascript - React Remove Bootstrap 按钮轮廓

问题描述

我有一个反应组件，我在其中使用带有 role="button" 的跨度作为复选框，并希望删除当您关注按钮时发生的轮廓。有谁知道如何做到这一点？我的复选框代码在这里：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CheckedIcon from 'react-icons/lib/md/check-box';
import UncheckedIcon from 'react-icons/lib/md/check-box-outline-blank';

const styles = {
  defaultButtonStyle: {
  backgroundColor: 'rgba(0,0,0,0)',
  },
};

export default class CheckboxBootstrap extends Component {
  render() {
    const { disabled, style, tabIndex, onChange, name, checked, size, color, value } = this.props;

return (
  <span
    className={['checkbox', disabled && 'disabled'].join(' ')}
    style={[styles.defaultButtonStyle, style]}
    role="button"
    tabIndex={disabled ? '' : tabIndex}
    onClick={() => !disabled && onChange({
      name,
      checked: !checked,
      value: checked && value,
    })}
  >
    { checked && <CheckedIcon size={size} color={color} />}
    { checked === false && (
      <UncheckedIcon size={size} color={color} />
    )}
    {this.props.children}
  </span>
);
}}

我尝试添加样式和类名作为默认值和道具。有没有人有什么建议？

标签： javascriptreactjstwitter-bootstrap

解决方案

你有明确设置outline: 'none'吗defaultButtonStyles？

还：

您可能还想更改disabled && 'disabled'以disabled ? 'disabled' : ''停止添加"false"className

与此相类似 ：

{ checked && <CheckedIcon size={size} color={color} />}
{ checked === false && (<UncheckedIcon size={size} color={color} />)}

可以变成：

{checked
    ? <CheckedIcon size={size} color={color} />
    : <UncheckedIcon size={size} color={color} />
}

推荐阅读