Question

我正在尝试使用react-toolbox单选按钮https://github.com/react-toolbox/react-toolbox/tree/dev/components/radio在我的反应应用程序中设置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);
    }
}

有两个问题：

虽然我正在宣布，但没有检查radioButton this.state.counterType为1
当尝试更改状态（通过单击）时，onChange不是触发

使用字符串而不是整数也不能解决问题。我在这做错了什么？谢谢！

Answer 1

据我所知，因为你没有在你的状态中设置'value'，所以它不会检查任何单选按钮。此外，既然您没有指定'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

检查此在线代码段link

React-Toolbox RadioGroup onChange不起作用

2 个答案: