react改变checkbox的文字类型_React Checkbox不发送onChange

2024-05-11 21:34:40

TLDR：使用defaultChecked而不是已检查的工作jsbin。

尝试设置一个简单的复选框，该复选框将在选中时划掉其标签文本。由于某些原因，当我使用组件时，不会触发handleChange。谁能解释我在做什么错？

var CrossoutCheckbox = React.createClass({

getInitialState: function () {

return {

complete: (!!this.props.complete) || false

};

},

handleChange: function(){

console.log('handleChange', this.refs.complete.checked); // Never gets logged

this.setState({

complete: this.refs.complete.checked

});

},

render: function(){

var labelStyle={

'text-decoration': this.state.complete?'line-through':''

};

return (

type="checkbox"

checked={this.state.complete}

ref="complete"

onChange={this.handleChange}

/>

{this.props.text}

);

}

});

用法：

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);

解：

使用checked不会使基础值(显然)发生变化，因此不会调用onChange处理程序。切换到defaultChecked似乎可以解决此问题：

var CrossoutCheckbox = React.createClass({

getInitialState: function () {

return {

complete: (!!this.props.complete) || false

};

},

handleChange: function(){

this.setState({

complete: !this.state.complete

});

},

render: function(){

var labelStyle={

'text-decoration': this.state.complete?'line-through':''

};

return (

type="checkbox"

defaultChecked={this.state.complete}

ref="complete"

onChange={this.handleChange}

/>

{this.props.text}

);

}

});

react改变checkbox的文字类型_React Checkbox不发送onChange相关推荐

react改变checkbox的文字类型_reactjs – React复选框事件和处理程序的Typescript类型？...
我在Typescript中构建类似 this React example的东西.目标是让父项具有状态,并创建几个无状态子组件,将其点击返回到父组件. 由于示例是在Javascript中,我不知道输入框 ...
html 勾选框点击文字勾选,ztree点击文字勾选checkbox，radio实现方法
ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...
SecureCR 改变背景色和文字颜色
SecureCR 改变背景色和文字颜色 1.打开SecureCR链接Linux服务器,Options->Session Options->Emulation->Terminal 选择 ...
JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
2019独角兽企业重金招聘Python工程师标准>>> JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的. 判断checkbox是否被选中网上有选多种写法,这里 ...
android listview 中的checkbox,Android中ListView与CheckBox的使用，及问题解决
最近自己在编写有关SIM卡管理的软件做练习,其中使用到了ListView与CheckBox的的组合,遇到了和大家有同样的问题: 1.选中一个checkbox对应位置的其他checkbox也会被选中 2 ...
Overload重載和Override重写的区别。Overloaded的方法是否可以改变返回值的类型?
Overload是重载的意思,Override是覆盖的意思,也就是重写. 重载Overload表示同一个类中可以有多个名称相同的方法,但这些方法的参数列表各不相同(即参数个数或类型不同). 重写Ove ...
PHP中获取CHECKBOX提交的内容及checkbox全选
提交页 //js控制全选/取消全选 <script type="text/javascript"> function check_all(obj,cName) { va ...
找不到模块“react”或其相应的类型声明。ts(2307)
开发过程中发现ts报错如下: 找不到模块"react"或其相应的类型声明.ts(2307) 解决办法: 这种ts报错是项目中ts版本与vscode中的ts版本不匹配导致的; 不要使 ...
改变输出的文字的字体格式
在ObjectARX对CAD进行二次开发时,如果你想改变输出的文字的字体格式,可以用下面语句进行设置 AcDbTextStyleTable *pTextStyleTbl; acdbHostA ...

最新文章

热门文章