Question

我有一个复选框，但是当我检查它时，不会触发onChange方法。它不会打印＆＃34;测试＆＃34;

<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

如果您使用checkBoxes包裹CheckboxGroup，则需要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>

工作示例

Answer 2

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

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

有效吗？

复选框onChange未触发

2 个答案: