javascript - React - 复选框不切换

Question

当用户勾选复选框时，我能够成功地将折扣金额从 0 更改为 50%，但之后不会关闭。

我假设 handleChange 函数有问题:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    // Define data above render()
    constructor(){
      super(); 

      this.state = {
        discount: 0,
      }

      this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {

         this.setState({
            discount: event.target.checked = this.state.discount = .50});
    } 

    render() {

        return( 
            <div>
            Apply 50% discount:
            <input type='checkbox' value={this.state.discount} checked={this.state.discount} checked={this.state.discount} onChange={this.handleChange} />
            <br/><br/>);     
    }
}

export default App;

Answer 1

您的 handleChange 函数中似乎缺少 =，这会导致状态更新行为不正确。

尝试像这样修改这个函数，为了清晰和正确:

handleChange(event) {

  // Toggle the discount value between 0.5 and 0.0 via this logic
  const nextDiscount = (this.state.discount === 0.5) ? 0.0 : 0.5

  // Update discount state with nextDiscount value
  this.setState({ discount: nextDiscount });
} 

此外，考虑更新您的 render() 方法，以便根据 this.state 的值将 checked 属性的值评估为 truthy/falsey .discount(即通过此表达式 (this.state.discount === 0.5))。还要确保只有一个 checked Prop 被传递给该复选框输入:

render() {

    return(<div>
        Apply 50% discount:
        <input type='checkbox' 
               value={this.state.discount} 
               checked={ (this.state.discount === 0.5) } 
               onChange={this.handleChange} />
        <br/>
        <br/>);     
}