單選按鈕無狀態組件在ReactJs

Question

我是新來的反應和終極版，我想創建包含兩個單選按鈕組件，所以我寫的是這樣的：

進口反應，{} 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. 你可能希望你的單選按鈕具有相同的name，這樣，當選擇了一個，另一個是取消。

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>