react js中的复选框没有改变

Question

我的主要组件如下：

export default class RegistrationFormStepFour extends React.Component{
constructor(props){
    super(props);
    this.state = {
        terms: false,
        emailNotifications: false,
        smsNotifications: false,
        errors: {}
    }
}


handleTerms(event){
    event.preventDefault();
    this.setState({terms: !this.state.terms});
}

render(){
    const language = this.props.currentLanguage;

    return (
        <div>
            <Terms
                nameYes="chcTerms"
                text={language.termsText}
                state={this.state.terms}
                onChange={this.handleTerms.bind(this)}
                currentLanguage={language}
                error={this.state.errors.terms}/>

        </div>
    );
}
}

组件术语如下：

import React from 'react';

const Terms = ({nameYes, text, state, onChange, error}) => {

let hasError = error ? "hasError" : "";

return (
    <div className="col-lg-12 text-center" style={{marginBottom: 30}}>
        <form>
            <label className="radio-inline">
                <input
                    type="checkbox"
                    name={nameYes}
                    checked={state}
                    onChange={onChange}
                    value=""/>
            </label>
        </form>
        <p className={`questionsText ${hasError}`} style={{marginTop: 10}}>{text}</p>
    </div>
);
};

export default Terms;

但是当我点击复选框时，什么也没有发生。如果我在条款组件中控制台记录state，它会显示正确的值。第一次是false，当我点击复选框时，不是真的，但复选框没有被选中。

有什么建议吗？

Answer 1

我认为您应该从输入标签中删除 value attr 。试试这个：

  <input
                        type="checkbox"
                        name={nameYes}
                        checked={state}
                        onChange={onChange}
                        />

Answer 2

event.preventDefault() 导致您在受控组件复选框中出现问题。

http://www.matthiaslienau.de/blog/tags/checkbox

复选框（和单选按钮）：手动更新复选框的状态失败（并且未经测试：我认为单选控件也是如此）。为什么？人们将面临的问题是，自 HTML 时代以来，复选框 onChange 事件以一种特殊的方式运行（我怎么会忘记！）：您可能无法通过 .checked 属性手动切换复选框的状态。 React 也没有。 onChange (onClick) 事件在元素状态内部更改后触发。这可能只是根据事件处理程序的返回值来恢复。有关这一事实的全面检查，请参阅这篇文章。

const Terms = ({ nameYes, text, state, onChange, error }) => {
  let hasError = error ? "hasError" : "";
  return (
    <div>
      <form>
        <label className="radio-inline">
          <input
            type="checkbox"
            name={nameYes}
            checked={state}
            onChange={onChange} 
          />
        </label>
      </form>
      <p className={`questionsText ${hasError}`}>{text}</p>
    </div>
  );
};

class RegistrationFormStepFour extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      terms: false,
      emailNotifications: false,
      smsNotifications: false,
      errors: {}
    }
  }

  handleTerms(event) {
    this.setState({ terms: event.target.checked });
  }

  render() {
    const language = { termsText: 'Some Language' };
    return (
      <div>
        <Terms
          nameYes="chcTerms"
          text={language.termsText}
          state={this.state.terms}
          onChange={this.handleTerms.bind(this)}
          currentLanguage={language}
          error={this.state.errors.terms}/>
       {JSON.stringify(this.state)}
      </div>
    );
  }
}

ReactDOM.render(<RegistrationFormStepFour />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>