React-Toolbox RadioGroup onChange不起作用

Question

我正在嘗試使用react-toolbox單選按鈕https://github.com/react-toolbox/react-toolbox/tree/dev/components/radio在我的react應用程序中設置radioButtons。

這是我的代碼：

import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';

class ClientsEdit extends Component {
    constructor(props) {
        super(props);
        this.bindLibs();

        this.state = {
            counterType: 1
        };
    }

   // Some other functions

    render() {
        return (
            <div>
                 <RadioGroup name='counterType' value={this.state.counterType} onChange={this.handleRadioButtonChange}>
                    <RadioButton label={t('clients:new.numeric')} value={1}/>
                    <RadioButton label={t('clients:new.alphanumeric')} value={2}/>
                 </RadioGroup>
            </div>
        );
    }

    bindLibs= () => {
    // ...
        this.handleRadioButtonChange = handleRadioButtonChange.bind(this);
    }
}

有兩個問題：

1. 盡管我聲明this.state.counterType為1，但未檢查this.state.counterType
2. 嘗試更改狀態（通過單擊）時，不會觸發onChange

使用字符串而不是整數也不能解決問題。 我在這里做錯了什么？ 謝謝！

Answer 1

據我所知，由於您未在狀態中設置“值”，因此不會選中任何單選按鈕。 另外，由於您還沒有指定'handleRadioButtonChange'，因此建議您像這樣在當前組件中對其進行定義

handleRadioButtonChange = (value) => {
  this.setState({value});
};

在此處查看自述文件中給出的示例： https : //github.com/react-toolbox/react-toolbox/tree/dev/components/radio

Answer 2

您應該使用string ，而不是number的value

import React,{Component} from 'react';
import {RadioGroup, RadioButton} from 'react-toolbox/lib/radio';

class ClientsEdit extends Component {
    constructor(props) {
        super(props);
        this.handleRadioButtonChange = this.handleRadioButtonChange.bind(this);
        this.state = {
            counterType: '1' // changed
        };
    }

    handleRadioButtonChange(e){
       this.setState({
       counterType:e
     })
    }
    render() {
        return (
            <div>
                 <RadioGroup name='counterType' value={this.state.counterType} onChange={this.handleRadioButtonChange}>
                    <RadioButton label={'first'} value={'1'}/>  // changed
                    <RadioButton label={'last'} value={'2'}/>    // changed
                 </RadioGroup>
            </div>
        );
    }

}

export default ClientsEdit

查看此在線代碼段鏈接