javascript - 'onChange' 事件在反应中只被调用一次

问题描述

我正在使用材料-ui

我的反应组件在这里：

import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import React from "react";
import { withStyles } from "@material-ui/core/styles";

const styles = (theme) => ({
});

class SomeComponent extends React.Component {
  static propTypes = {

  };

  state = {
    checked: true,
  }

  handleChange = name => event => {        
    event.persist()
    this.setState({ 
      [name]: event.target.checked 
    }, () => {
      if (event.target.checked) {
        this.props.parentMethod1(event.target.value)
      } else {
        this.props.parentMethod2(event.target.value)
      }
    });
  };

  render() {
    const { user } = this.props;
    return (
      <div>
        <FormControlLabel
          control={
            <Checkbox
              checked={this.state.checked}
              onChange={this.handleChange('checked')}
              value={user.id}
              color="primary"
            />
          }
          label={user.first_name}
        />
      </div>
    );
  }

}

export default withStyles(styles)(SomeComponent);

问题是，我只能选择/取消选择复选框一次。选择/取消选择复选框后，不会发生 onChange 事件。

你能帮我如何让 Checkbox 像现在这样工作吗？谢谢。

这是重现的错误：

https://codesandbox.io/s/y041zknrqv

标签： javascriptreactjsmaterial-uidom-events

OP 的原始代码沙盒： https ://codesandbox.io/s/y041zknrqv

如果上面的代码框正确地展示了您的实际问题，那么您的问题是您搞砸了event.stopPropagation并且event.preventDefault

在Parent1andParent2中，您为onClickdiv 容器提供事件处理程序并在两个处理程序上实现event.preventDefaultand event.stopPropagation。因此，当您第一次单击复选框时会发生以下情况：

Checkbox 接收点击事件并更新状态，导致checked = true。
事件冒泡至Parent2. 这里onClick触发handleClick该组件的功能。
in handleClick，event.preventDefault停止浏览器对该事件的默认操作，意味着未来的点击事件不会触发复选框，同时event.stopPropagation阻止父组件触发onClick，意味着永远Parent1不会立即收到任何点击事件。

而现在，从第二次点击事件开始，只能Parent2接收和响应。它的孩子和它的父母将不再处理任何事情。你可以在这里看到控制台登录：https ://codesandbox.io/s/r75rp285xq

因此，要解决您的问题，请event.preventDefault从Parent2's中删除handleClick。如果您还想纠正的行为Parent1，请event.preventDefault从两个组件中删除并event.stopPropagation从Parent2

javascript - 'onChange' 事件在反应中只被调用一次

问题描述

解决方案

推荐阅读