我有一个反应组件,我正在使用带有角色=“按钮”的跨度的复选框,并希望删除当您专注于按钮时发生的轮廓。有谁知道如何做到这一点?我的复选框代码在这里:
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>
);
}}
我尝试将style和className都添加为默认值和props。有没有人有什么建议?
你有没有在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} />
}