未触发复选框 onChange

Question

我有一个复选框，但是当我选中它时，没有触发 onChange 方法。它不打印 "Test"

<CheckBox
   value="Test"
   onChange={e => {
      console.log('Test');
   }}
>

我的完整代码：

const CheckboxGroup = Checkbox.Group;

...

<CheckboxGroup>
        <QuestionCheckBox
          value="31"
          onChange={() => {
            console.log('Test');
          }}
        >
          <FormattedMessage id="SE-196.PopUp6.Question.31" />
        </QuestionCheckBox>
        <QuestionCheckBox value="32">
          <FormattedMessage id="SE-196.PopUp6.Question.32" />
        </QuestionCheckBox>
        <QuestionCheckBox value="33">
          <FormattedMessage id="SE-196.PopUp6.Question.33" />
        </QuestionCheckBox>
        <QuestionCheckBox value="34">
          <FormattedMessage id="SE-196.PopUp6.Question.34" />
        </QuestionCheckBox>
      </CheckboxGroup>

Answer 1

这里没有传统的 <input type="checkbox" ... /> ，但我们只能猜测 Checkbox 组件是什么意思。所以，试试

<input type="checkbox" onChange={e => { console.log('Test') }} />

有效吗？

Answer 2

如果你用 CheckboxGroup 包装 checkBoxes 你需要把 onChange 到 CheckboxGroup

然后您需要创建一个名为 checked

的新状态

<CheckboxGroup onChange={value => this.setState({checked: value})}>
        <QuestionCheckBox value="31">
        {this.state.checked.indexOf('31') !== -1 ?
          <FormattedMessage id="SE-196.PopUp6.Question.31" />: null}
        </QuestionCheckBox>
        <QuestionCheckBox value="32">
        {this.state.checked.indexOf('32') !== -1 ?
          <FormattedMessage id="SE-196.PopUp6.Question.32" />: null}
        </QuestionCheckBox>
        <QuestionCheckBox value="33">
         {this.state.checked.indexOf('33') !== -1 ?
          <FormattedMessage id="SE-196.PopUp6.Question.33" />: null}
        </QuestionCheckBox>
        <QuestionCheckBox value="34">
         {this.state.checked.indexOf('34') !== -1 ?
          <FormattedMessage id="SE-196.PopUp6.Question.34" />: null}
        </QuestionCheckBox>
      </CheckboxGroup>

工作示例

未触发复选框 onChange

Checkbox onChange not fired

reactjs

antd