简体   繁体   中英

Cannot change state from child to parent component

I am try to change state in parent component onChange event.

On click on Checkbox state includeExtremeClaims should be changed into true .

Parent Component:

export class ManageAnalytics extends Component {
  static contextTypes = baseContextTypes

  state = {
    includeExtremeClaims: false
  }

 handleChange = (e, { name, value } = {}) => {
    this.setState({ [name]: value })
  }

render() {
  return (
     <div>
        // Passing down handleChange and includeExtremeClaims state as props
        <Analytics
          handleChange={this.handleChange}
          includeExtremeClaims={this.state.includeExtremeClaims}
        />
      </div>
    )
  }

Child Compnent:

export class Analytics extends Component {
  static contextTypes = baseContextTypes

render() {
    const { handleChange, includeExtremeClaims } = this.props
  return (
    <Checkbox
      label="Include Extreme Cases"
      name="includeExtremeClaims"
      onChange={handleChange}
      value={includeExtremeClaims}          
    />
   )
}

Question is : On click on Checkbox Why my state is not changed?

Problem was in value which is provide on Checkbox, value is always the same, that is reason why is not changed:

value={includeExtremeClaims} it should be value={!includeExtremeClaims}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM