javascript - ReactJs 无状态组件中的单选按钮

Question

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

Answer 1

1. 您可能希望您的单选按钮具有相同的名称，以便在选择一个按钮时取消选择另一个按钮。

2. 看起来您的 onChange 函数需要 value，但它们实际上正在接收 event。

3. 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>