Checkbox React复选框未发送onChange
TLDR:使用defaultChecked而不是checked,正在工作 尝试设置一个简单的复选框,在选中时将其标签文本划掉。由于某些原因,当我使用该组件时,handleChange没有被解雇。谁能解释我做错了什么Checkbox React复选框未发送onChange,checkbox,onchange,reactjs,Checkbox,Onchange,Reactjs,TLDR:使用defaultChecked而不是checked,正在工作 尝试设置一个简单的复选框,在选中时将其标签文本划掉。由于某些原因,当我使用该组件时,handleChange没有被解雇。谁能解释我做错了什么 var CrossoutCheckbox=React.createClass({ getInitialState:函数(){ 返回{ 完成:(!!this.props.complete)| | false }; }, handleChange:function(){ console.
var CrossoutCheckbox=React.createClass({
getInitialState:函数(){
返回{
完成:(!!this.props.complete)| | false
};
},
handleChange:function(){
console.log('handleChange',this.refs.complete.checked);//永远不会被记录
这是我的国家({
完成:this.refs.complete.checked
});
},
render:function(){
标签式变种={
“文本装饰”:this.state.complete?'line-through':“”
};
返回(
{this.props.text}
);
}
});
用法:
React.renderComponent(CrossoutCheckbox({text:“text”,complete:false}),mountNode);
解决方案:
使用checked不会让基础值发生变化(显然),因此不会调用onChange处理程序。切换到defaultChecked似乎可以解决此问题:
var CrossoutCheckbox=React.createClass({
getInitialState:函数(){
返回{
完成:(!!this.props.complete)| | false
};
},
handleChange:function(){
这是我的国家({
完成:!this.state.complete
});
},
render:function(){
标签式变种={
“文本装饰”:this.state.complete?'line-through':“”
};
返回(
{this.props.text}
);
}
});
要获取复选框的选中状态,路径为:
this.refs.complete.state.checked
另一种方法是从传递到handleChange
方法的事件中获取:
event.target.checked
在物料界面中,复选框的状态可以取为
this.refs.complete.state.switched
在不希望在输入DOM上使用onChange处理程序的场景中,可以使用
onClick
属性作为替代。如果选中默认值,则该条件可能会为v16 IINM留下固定状态
class CrossOutCheckbox extends Component {
constructor(init){
super(init);
this.handleChange = this.handleChange.bind(this);
}
handleChange({target}){
if (target.checked){
target.removeAttribute('checked');
target.parentNode.style.textDecoration = "";
} else {
target.setAttribute('checked', true);
target.parentNode.style.textDecoration = "line-through";
}
}
render(){
return (
<span>
<label style={{textDecoration: this.props.complete?"line-through":""}}>
<input type="checkbox"
onClick={this.handleChange}
defaultChecked={this.props.complete}
/>
</label>
{this.props.text}
</span>
)
}
}
class CrossOutCheckbox扩展组件{
构造函数(init){
超级(初始);
this.handleChange=this.handleChange.bind(this);
}
handleChange({target}){
if(target.checked){
target.removeAttribute('checked');
target.parentNode.style.textDecoration=“”;
}否则{
target.setAttribute('checked',true);
target.parentNode.style.textDecoration=“行通过”;
}
}
render(){
返回(
{this.props.text}
)
}
}
我希望这对将来的人有所帮助。在这种情况下最好不要使用refs。使用:
<input
type="checkbox"
checked={this.state.active}
onClick={this.handleClick}
/>
有一些选择:
checked
vsdefaultChecked
前者将对状态更改和点击做出响应。
后者将忽略状态变化
onClick
vsonChange
前者总是在点击时触发。
如果
输入
元素上存在选中的
属性,则后者不会在单击时触发。如果您有一个如下所示的handleChange
函数:
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value,
});
}
您可以创建一个自定义的onChange
函数,使其作用类似于文本输入:
<input
type="checkbox"
name="check"
checked={this.state.check}
onChange={(e) => {
this.handleChange({
target: {
name: e.target.name,
value: e.target.checked,
},
});
}}
/>
{
这是我的手机换({
目标:{
名称:e.target.name,
值:e.target.checked,
},
});
}}
/>
使用defaultChecked时,onChange不会在手机上调用handleChange。也可以使用onClick和onTouchEnd
<input onClick={this.handleChange} onTouchEnd={this.handleChange} type="checkbox" defaultChecked={!!this.state.complete} />;
;
如果有人正在寻找通用事件处理程序,可以或多或少地使用以下代码(假设为每个输入设置了name属性):
首先,为什么不添加一个onChange,它只执行this.setState({checked:!this.state.checked})
比存储值更简单。然后,checked属性中有一个三元运算符:checked={this.state.checked?'checked':null}
它就是这样开始的,但似乎从未更新过。所以我开始到处乱动它来调试没有被解雇的东西。理想情况下,完成后将返回到最简单的形式:)假设您的mountNode是实际的dom节点,则必须使用this.refs.complete.getDOMNode()。选中。请参见fiddle,他可以只使用状态而不获取dom节点:它工作正常,您一定键入了错误的内容。忽略TLDR注释-defaultChecked并不总是answerhandleChange不会被调用,无论您单击复选框或标签,handleChange不会被调用:(.尝试使用defaultChecked={this.state.complete}而不是“checked”在您的输入上。就是这样…搜索时一直在四处寻找。如果其他人也遇到此问题,将用完整的工作答案更新问题。但是为什么-有相同的问题,但您应该使用检查控制组件:/settingchecked
表示状态在组件外部管理。当用户单击时,没有任何东西可以调用handleChange
,因为没有更新状态。相反,您需要在单击onClick
时监听handleChange
,并在那里触发状态更新。在input
上不是应该是这个。handleChange
?您犯了一个小错误->[e.target.name]:e.目标。checked@Haikel如果您有一个handleChange函数,它只处理复选框输入,那么这将是真的,但是如果您注意到在第二个代码块中,我们在一个箭头函数中调用handleChange
,并将target.value
设置为e.target.checked
(实质上创建了一个假事件).这样做是为了使相同的handleChange函数可以用于tex
this.handleInputChange = (e) => {
item[e.target.name] = e.target.type === "checkbox" ? e.target.checked : e.target.value;
}