ReactJs中无状态组件中的单选按钮答案

【问题标题】：Radio Button in stateless component in ReactJsReactJs中无状态组件中的单选按钮
【发布时间】：2017-08-07 15:34:17
【问题描述】：

我是 react 和 redux 的新手，我想创建包含两个单选按钮的组件，所以我写了这样的内容：

从 'react' 导入 React，{ PropTypes }；

const renderCashRadioButtons = currentCashSelector => (
  <form onClick={currentCashSelector}>
    <input
      type="radio"
      name="cash-transaction"
      value="Transcation"
      onChange={value => currentCashSelector(value)}
    />
    <input
      type="radio"
      name="cash-transfer"
      value="Transfer"
      onChange={value => currentCashSelector(value)}
    />
  </form>
);


const CashRadioButtons = ({ currentCashSelector }) => (
  <div className="container">
    {renderCashRadioButtons(currentCashSelector)}
  </div>
);

CashRadioButtons.propTypes = {
  currentCashSelector: PropTypes.func.isRequired
};


export default CashRadioButtons;

currentCashSelector 是一个函数。当我渲染它时，它似乎不起作用。该值没有改变，我没有看到要更新的状态。你有什么想法吗？

【问题讨论】：

我不这么认为...我使用了另一个单选按钮组件并且它有效。但我想使用默认的html

标签： javascript reactjs radio-button stateless

【解决方案1】：

您可能希望您的单选按钮具有相同的name，这样当一个被选中时，另一个被取消选中。
看起来您的 onChange 函数正在等待 value，但它们实际上正在接收 event。
form 上的 onChange 与单选按钮上的 onChange 之间可能存在不必要的重复。

可能的解决方案

  <form onClick={event => currentCashSelector(event.target.value)}>
    <input
      type="radio"
      name="cash-type"
      value="Transaction"
    />
    <input
      type="radio"
      name="cash-type"
      value="Transfer"
    />
  </form>

【讨论】：