javascript - 对 Material UI 开关提出请求
问题描述
我正在构建一个开关,它从我从后端检索的值中读取它的检查值,当用户切换它时,一个 PUT 请求被发送到后端以更新选择。
这是我到目前为止所拥有的,切换没有显示响应,我在这里缺少什么
class Test extends Component {
constructor(props) {
super(props);
this.state = {
toggleValue: ''
}
}
componentDidMount() {
this.props.getToggleValue();
}
toggleValue = () => {
if(this.props.value){
return this.props.value.toggleValue
}
}
handleChange(field) {
return (event) => {
this.setState({
[field]: event.target.value,
});
}
}
render() {
return (
<>
<Switch value={this.state.toggleValue} checked={this.toggleValue()} onChange={this.handleChange('toggleValue')} />
</>
)
}
const mapStateToProps = (state, ownProps) => {
return {
...ownProps,
value: state.testReducer.value
};
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
getToggleValue
}, dispatch);
};
解决方案
你必须检查event.target.checked
而不是event.target.value
handleChange(field) {
return (event) => {
this.setState({
[field]: event.target.checked,
});
}
}
推荐阅读
- testing - Clojure - 如何在实现中检测另一个协议
- angular - 将变量分配为数组中的键
- php - 使用 php 查找数组的第一个元素并将其添加到活动类以使用 bootstrap.js 创建选项卡系统
- ruby - 从数组中创建散列,其中值是元素的索引
- android - Kotlin Activity 将书写顺序从左到右更改为从右到左(带有不同语言的电话)
- scala - 与输入字符串匹配的字符串列表
- pom.xml - 我在这个 POM 中的错误是什么以及在哪里?
- python - Pygame 无法加载 PNG 图像
- python - Python 的 time.time 函数在全球范围内的准确性如何?
- jquery - 下拉菜单立即打开