时间戳

首页 > 解决方案 > 反应本机社区复选框 onValueChange 不起作用

javascript - 反应本机社区复选框 onValueChange 不起作用

问题描述

我用来允许用户选择主题的@react-native-community/checkbox 只调用一次 onValueChange。所以你可以检查它，但你不能取消它。

我通过在每次调用该函数时执行 console.log 来测试它，它只打印一次。我还记录了之前和之后的主题状态，它会按预期更改，并且 Checkbox 值道具上使用的选定值也会更新。

我还在不同的屏幕上使用了复选框，它运行良好，所以我认为我没有安装问题。

复选框组件：

<>
  <NKCard>
    <Text style={styles.heading}>Module 1</Text>
    {subjects
      .filter(subject => subject.Module === '1')
      .map(subject => {
        return (
          <View key={subject.id} style={styles.subject}>
          <Checkbox
            disabled={subject.disabled}
            value={subject.selected}
            onValueChange={() => {
              handleSubjectSelect(subject.id);
            }}
            tintColors={{true: '#36b254', false: '#36b254'}}
          />
          <Text style={styles.subjectTitle}>{subject.Title}</Text>
        </View>
      );
    })}
  </NKCard>
</>

handleSubjectSelect 函数：

const handleSubjectSelect = id => {
  console.log('change');
  setSubjects(currentSubjects => {
    console.log(currentSubjects);
    currentSubjects.forEach(subject => {
      if (subject.id === id) {
        subject.selected = !subject.selected;
        console.log('update');
      }
    });
    console.log(currentSubjects);

    return currentSubjects;
  });
};

控制台日志：

[Sun May 24 2020 22:31:55.883]  LOG      change

[Sun May 24 2020 22:31:55.885]  LOG      [{"Grade": "1", "Module": "1", "Status": "active", "Title": "Math", "disabled": false, "id": "15", "selected": 
false}, {"Grade": "1", "Module": "2", "Status": "active", "Title": "Math", "disabled": false, "id": "16", "selected": false}, {"Grade": "1", "Module": "3", "Status": "active", "Title": "Math", "disabled": false, "id": "17", "selected": false}, {"Grade": "1", "Module": "4", "Status": "active", "Title": "Math", "disabled": false, "id": "18", "selected": false}]

[Sun May 24 2020 22:31:55.891]  LOG      update

[Sun May 24 2020 22:31:55.898]  LOG      [{"Grade": "1", "Module": "1", "Status": "active", "Title": "Math", "disabled": false, "id": "15", "selected": 
true}, {"Grade": "1", "Module": "2", "Status": "active", "Title": "Math", "disabled": false, "id": "16", "selected": false}, {"Grade": "1", "Module": "3", "Status": "active", "Title": "Math", "disabled": false, "id": "17", "selected": false}, {"Grade": "1", "Module": "4", "Status": "active", "Title": "Math", "disabled": false, "id": "18", "selected": false}]

标签： javascriptreact-native

解决方案

发现我的错误。

我直接在 handleSubjectSelect 函数中的 currentSubjects 上更改了对象的选定值。我通过制作 currentSubjects 的新副本并更改其中的对象，然后返回 newSubjects 来修复它。

解决方案：

const handleSubjectSelect = id => {
  console.log('change');
  setSubjects(currentSubjects => {
    console.log(currentSubjects);

    const newSubjects = [...currentSubjects];

    newSubjects.forEach(subject => {
      if (subject.id === id) {
        subject.selected = !subject.selected;
        console.log('update');
      }
    });
    console.log(newSubjects);

    return newSubjects;
  });
};

推荐阅读