作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
是否可以通过单击选定的电台来取消选择电台?
我知道这是默认的浏览器行为,但我一直在研究此自定义功能。
Material-ui这也做不到。
我知道Material-ui包裹<input type="radio">
里面<label />
,看起来像这样:
<label>
<input type="radio" onChange={() => {}}>
</label>
如果我想实现这个功能,我必须替换 onChange
进入onClick
,但是浏览器会向我大喊 <input />
应该有onChange
事件处理程序。
那么我如何正确 Hook onChange
以及onClick
事件处理程序?
我应该给 onChange
事件为空函数?或者我应该打电话preventDefault
?
最佳答案
查看this网址
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
class App extends Component {
constructor() {
super();
this.state = {
group1:[{"value":"1"},
{"value":"2"},
{"value":"3"}],
group1Selected:null,
group2:[{"value":"1"},
{"value":"2"},
{"value":"3"}],
group2Selected:null,
};
}
ChangeOption = (i,group) =>{
var groupData = this.state[group] == i?null:i;
this.setState({[group]:groupData})
}
render() {
const {group1,group2,group1Selected,group2Selected} = this.state;
return (
<div>
{
group1.map( (data,i)=><><input type="radio" id={`1-${i}`} onClick={e=>this.ChangeOption(i,"group1Selected")} checked={i==group1Selected?true:false} name="1" value={data.value}/><label for={`1-${i}`}>{data.value}</label></>)
}
<br/>
{
group2.map( (data,i)=><><input id={`2-${i}`} onClick={e=>this.ChangeOption(i,"group2Selected")} type="radio" checked={i==group2Selected?true:false} name="2" value={data.value}/><label for={`2-${i}`}>{data.value}</label></>)
}
</div>
);
}
}
render(<App />, document.getElementById('root'));
关于javascript - 是否可以通过单击所选的一个(在 React 中)来取消选择 <Radio/>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56167316/
我正在尝试用 Swift 编写这段 JavaScript 代码:k_combinations 到目前为止,我在 Swift 中有这个: import Foundation import Cocoa e
我是一名优秀的程序员,十分优秀!