ReactJs 复选框在首次使用后不会更改值

Question

我有一个包含各种表单元素的大型表单，这些表单元素是根据 get 请求动态呈现的。所有其他类型的表单（例如文本和选择）都工作正常，但复选框却不行。

在我检查一次后，它只保持打开状态（即使我取消选中它），我是否在这里遗漏了什么或做错了什么？

这是我当前的相关代码：

class Input extends Component{
    render(){
        var form;
        if (this.props.componentClass=="choice") {
            // select form
        }

        else if (this.props.componentClass=="bool")
            form =(<Checkbox id={this.props.controlId} onChange={this.props.onChange}
                               defaultChecked={this.props.placeholder} >
                        </Checkbox>);
        else
            // text form
        return (
            <div>
                <Form inline onSubmit={this.handleSubmit}>
                    <FormGroup controlId={this.props.controlId}>
                        <ControlLabel>{this.props.name}</ControlLabel>
                        {form}
                        <Panel>
                        {this.props.description}
                        </Panel>
                        <FormControl.Feedback />
                    </FormGroup>
                </Form>
                <br/>
            </div>
        );
    }
}

// onChange code (comes from a parent component)
    onChange(e){
        const form = Object.assign({}, this.state.form);
        form[e.target.id] = e.target.value;
        this.setState({ form });
        console.log('current state: ', this.state);
    }

Answer 1

您必须如前所述绑定 onChange 函数，但您应该使用“checked”而不是“value”。

这是您修改后的示例：

https://jsfiddle.net/8d3of0e7/3/

class Input extends React.Component{

    constructor(props){
    super(props)
    this.state = {form:{}}
  }

    render(){
    var form;
    if (this.props.componentClass=="choice") {
      // select form
    }else if (this.props.componentClass=="bool"){
      form = (
        <ReactBootstrap.Checkbox 
          id={this.props.controlId} 
          onChange={this.props.onChange.bind(this)}
          checked={this.state.form[this.props.controlId]}
          defaultChecked={this.props.placeholder} >
        </ReactBootstrap.Checkbox>);
    }else{
      // text form
    }
    return (
      <div>
        <ReactBootstrap.Form inline onSubmit={this.handleSubmit}>
          <ReactBootstrap.FormGroup controlId={this.props.controlId}>
            <ReactBootstrap.ControlLabel>
              {this.props.name}
            </ReactBootstrap.ControlLabel>
            {form}
            <ReactBootstrap.Panel>
              {this.props.description}
            </ReactBootstrap.Panel>
            <ReactBootstrap.FormControl.Feedback />
          </ReactBootstrap.FormGroup>
        </ReactBootstrap.Form>
        <br/>
      </div>
    );
  }

  componentDidUpdate(){
    console.log('current state: ', this.state);
  }

}

function onChange(e) {
  const form = Object.assign({}, this.state.form);
  form[e.target.id] = e.target.checked;
  this.setState({ form });
}

ReactDOM.render(
    <Input componentClass='bool' controlId='retired' 
    name='Is retired?' onChange={onChange}/>,
    document.getElementById('root')
)

在此示例中，我们的状态将是：state:{form:{retired:true}}

Answer 2

问题在于您为复选框提供了 onChange ，但没有将其绑定到值。因此，初始检查正在工作，因为这就是 defaultChecked 正在为您做的事情，但是一旦您实际与它交互，您就没有绑定到它的状态，导致反应不会在选中或未选中的位置重新渲染它。

Answer 3

  const TermAndConditions = () => {
  const [checked,setChecked] = useState(false);

  return (
    <Wrapper>
      <CustomCheckbox
        type="checkbox"
        width="20%"
        checked={checked} // give checked value
        value={checked}
        onChange={e => setChecked(e.target.checked)}
      />
      <label>Agree term and conditions.</label>
    </Wrapper>
  );
};
export default TermAndConditions;