将自定义SVG作为高阶组件中的单选按钮？

Question

我正在尝试在RadioButton HOC中用自定义SVG替换单选按钮。

这是组件的index.jsx的样子：

const text = {
  radio: 'radio',
};

export const RadioButton = ({ srcRadio, labelText, value, checked, onChange, name }) => (
  <div className={styles.button}>
    <input
      checked={checked}
      className={styles.input}
      type={text.radio}
      name={name}
      value={value}
      onChange={onChange}
    />
    <label className={styles.label}>
      <img alt="" src={srcRadio} />
        {labelText}
    </label>
  </div>
);

还有enhanced.js文件：

import radioChecked from 'components/UI/images/radio-checked.svg';
import radioUnchecked from 'components/UI/images/radio-unchecked.svg';

export const srcRadio = ({ checked }) =>
  checked ? radioChecked : radioUnchecked;

export const checked = ({ currentValue, value }) => currentValue === value;

export default compose(
  setDisplayName('OpportunityPageFeatures/RadioButtonEnhanced'),
  addProps({ checked }),
  addProps({ srcRadio }),
);

这可以很好地渲染，但是我的onClick函数仅点击了实际的输入单选按钮。如果我没有显示它并单击图像/标签，则它不会调用该函数。我必须显示它，它看起来像这样：