无法使用反应取消选中复选框

Question

此复选框被永久选中，我希望预先选中的复选框更改布尔状态。我目前正在使用这个handleChange 方法来处理文本输入。我必须创建另一个方法来处理复选框还是可以添加到现有方法中？

state = {
  billingEmail:'',
  billingAddressSame: true,
}

handleChange = input => e => {
   this.setState({[input]: e.target.value})
}

<input
  className="col-sm-12"
  type="email"
  placeholder="Email"
  onChange={handleChange('billingEmail')}
  defaultValue={values.billingEmail}
/>

<label className="col-sm-12" style={{paddingLeft: "0"}}>
  <input
    type="checkbox"
    checked={values.billingAddressSame}
    onChange={handleChange('billingAddressSame')}
  />
  Same as company address
</label>

Answer 1

将您的 handleChange 函数更改为

handleChange = input => e => {
   this.setState({[input]: !this.state[input]})
}

Answer 2

您可以通过单一方法控制复选框和输入。

见

构造函数和句柄变化函数-

constructor(props) {
 super(props);
 this.state = {
  isGoing: true,
  numberOfGuests: 2
 };

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

handleInputChange(event) {
 const target = event.target;
 const value = target.type === 'checkbox' ? target.checked : target.value;
 const name = target.name;

 this.setState({
   [name]: value
 });
}

在你的渲染函数中 -

render() {
 return (
  <form>
    <label>
      Is going:
      <input
        name="isGoing"
        type="checkbox"
        checked={this.state.isGoing}
        onChange={this.handleInputChange} />
    </label>
    <label>
      Number of guests:
      <input
        name="numberOfGuests"
        type="number"
        value={this.state.numberOfGuests}
        onChange={this.handleInputChange} />
    </label>
  </form>
 );
}

See this for more info

Answer 3

试试这个并告诉我，它对我来说很好用

import React, { Component, Fragment } from 'react';

class SignUp extends Component{
  state = {
    billingEmail:'',
    billingAddressSame: true,
  }

  render(){
    return(<Fragment>

      <input className="input" type="email" className="col-sm-12" placeholder="Email" value={this.state.billingEmail} onChange={e => this.setState({billingEmail: e.target.value})}/>

      <label className="col-sm-12" style={{paddingLeft: "0"}}>
      <input type="checkbox" value="CheckBox1" checked={this.state.billingAddressSame} onChange={e => this.setState({ billingAddressSame: !this.state.billingAddressSame })} />
        Same as company address
      </label>
    </Fragment>)
  }
}

export default SignUp;