Question

我正在使用material-ui

这是我的react组件：

export const SECOND_SYSTEM_AUTHENTICATE_REQUEST = 'SECOND_SYSTEM_AUTHENTICATE_REQUEST';
export const SECOND_SYSTEM_AUTHENTICATE_SUCCESS = 'SECOND_SYSTEM_AUTHENTICATE_SUCCESS';
export const SECOND_SYSTEM_AUTHENTICATE_FAILURE = 'SECOND_SYSTEM_AUTHENTICATE_FAILURE';

/**
 * Request Authenticate
 * @returns {{type: string}}
 */
function requestSecondSystemAuthentication () {
  return {
    type: SECOND_SYSTEM_AUTHENTICATE_REQUEST
  };
}

/**
 * Authenticate Success
 * @param {Object} data - response data
 * @returns {{type: string}}
 */
function secondSystemAuthenticateSuccess (data) {
  return {
    type: SECOND_SYSTEM_AUTHENTICATE_SUCCESS,
    data
  };
}

/**
 * Post Authenticate
 * @returns {Function} - action creator
 */
export function authenticateUserWithSecondSystem (authenticationToken) {
  return dispatch => {
    dispatch(requestSecondSystemAuthentication());

    ApiService.post('/api/authenticate', authenticationToken)
      .then(payload => dispatch(secondSystemAuthenticateSuccess(payload)))
}

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

您能帮我如何使Checkbox照常工作吗？谢谢。

以下是重现的错误：

https://codesandbox.io/s/y041zknrqv

Answer 1

OP的原始代码和框：https://codesandbox.io/s/y041zknrqv

如果上述代码和框正确地说明了您的实际问题，那么您的问题是您弄乱了event.stopPropagation和event.preventDefault

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

复选框收到点击事件并更新状态，导致选中 = true。
事件最多冒出Parent2。 onClick在这里触发了此组件的功能handleClick。
在handleClick中，event.preventDefault停止了该事件的浏览器默认操作，这意味着将来的点击事件不会触发复选框，而event.stopPropagation阻止父组件触发onClick，这意味着Parent1将立即不会收到任何点击事件。

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

因此，要解决您的问题，请从event.preventDefault的{{1}}中删除Parent2。如果您还想更正handleClick的行为，请从两个组件中删除Parent1，然后从event.preventDefault中删除event.stopPropagation

Answer 2

由于要向函数传递参数，请尝试在onChange事件上将其转换为箭头函数

<Checkbox
              checked={this.state.checked}
              onChange={() => this.handleChange('checked')}
              value={user.id}
              color="primary"
            />

Answer 3

如果要更改复选框的值。在您的情况下，您不得传递相同的值onChange

onChange={(e)=>this.handleChange(e)}

您的句柄更改功能应类似于

handleChange =event=> {        
    this.setState(prevState=>{ 
      checked: !prevState.checked
    }, () => {
      if (this.state.checked) {
        this.props.parentMethod1(this.state.checked)
      } else {
        this.props.parentMethod2(this.state.checked)
      }
    });
  };

这将在每个onChange事件中更改您的值。

“ onChange”事件仅在反应中被调用一次

3 个答案: