React-Toolbox RadioGroup onChange 不起作用答案

【问题标题】：React-Toolbox RadioGroup onChange doesn't workReact-Toolbox RadioGroup onChange 不起作用
【发布时间】：2017-08-01 13:42:47
【问题描述】：

我正在尝试使用 react-toolbox 单选按钮 https://github.com/react-toolbox/react-toolbox/tree/dev/components/radio 在我的反应应用程序中设置单选按钮。

这是我的代码：

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);
    }
}

有两个问题：

虽然我声明了，但没有检查单选按钮 this.state.counterType 为 1
尝试更改状态（通过单击）时，onChange 不会触发

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

【问题讨论】：

标签： javascript reactjs react-toolbox

【解决方案1】：

据我所知，由于您没有在您的状态下设置“值”，因此它不会检查任何单选按钮。另外，由于您没有指定“handleRadioButtonChange”，我建议您在当前组件中像这样定义它

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

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

【讨论】：

我从另一个文件导出了 handleRadioButtonChange。那不应该是问题。它甚至不调用 onChange。命名属性value 也不起作用
是的，因为它触发的方式是基于按钮的value 属性。对于 handleRadioButtonChange 而不是在单独的 bindLib 函数中运行它，我建议直接在构造函数中运行它。
hmmm，你不应该要求它是唯一的值，它应该适用于任何状态变量，但你的函数似乎没有正确绑定到组件。
它也适用于自定义属性，例如codesandbox.io/s/o2ORxVRzk 上面的 sn-p。这样做：onChange={() => { console.log("Test");}} 根本没有控制台日志。如果我什至无法触发 onChange 函数，changeHandler 应该不是问题

【解决方案2】：

您应该在value 中使用string 而不是number

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

查看这个在线sn-p link

【讨论】：

sn-p 也适用于整数。我相信其他一些导入存在问题，因为复制 sn-p 不适用于我的应用
对于integer，它的作用类似于直接值，我认为这就是它跳过绑定的原因。
@Nocebo 是的，兄弟.. 它与 integer,Check this snippet 工作正常
是的，这也是我改变的。我正在使用各种带有更复杂的 changeHandler 和几十个导入的 react-toolbox 组件。即使简化到荒谬的程度，唯一不起作用的组件是 radioGroup。这是最困扰我的：D
没有收到任何错误。单击按钮根本不起作用。好像他们被禁用了