Question

一个简单的复选框，可以使用

import React from 'react';
import PropTypes from 'prop-types';

export default class CheckBox extends React.Component {
  state = { isChecked: false };

  onChange = () => {
    this.setState(
      ({isChecked}) => ({ isChecked: !isChecked })
    );
  };

  render() {
    const {value, text} = this.props;
    this.props.getIsChecked(this.state.isChecked);
    return (
      <div className="field">
        <label htmlFor={value} className="checkbox">
          <input
            type="checkbox"
            value={value}
            checked={this.state.isChecked}
            onChange={this.onChange}
          />
          {text}
        </label>
      </div>
    );
  }
}

CheckBox.propTypes = {
  value: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  getIsChecked: PropTypes.func.isRequired
};

该复选框效果很好。我希望在state.isChecked之后获得最新的setState。

我试过了：

onChange = () => {
    this.setState(
        ({isChecked}) => ({ isChecked: !isChecked }),
        this.props.getIsChecked(this.state.isChecked)
    );
};

或

onChange = () => {
    this.setState(
        ({isChecked}) => ({ isChecked: !isChecked })
    );
    this.props.getIsChecked(this.state.isChecked);
};

我最终做到了这一点：

将this.props.getIsChecked(this.state.isChecked);放在render方法中，因为setState会触发render。

为什么前两个不起作用？什么是正确的方法呢？感谢

为什么我总是在setState之后获得旧状态？

0 个答案: