javascript - React Native CheckBox 和 FlatList : Cannot Toggle, 并且只能选择每个项目一次

Question

我正在使用import CheckBox from '@react-native-community/checkbox';。

我只能“选择”每个“项目”一次，并且无法切换它(更改或重新切换)。

任何帮助将不胜感激，如果有可用的替代插件/包，请随时提出建议。

代码片段如下:

 import CheckBox from '@react-native-community/checkbox';

 export default class FrCreateScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            timeSlots: [
                { id: '1', time: '10am - 11am' },
                { id: '2', time: '11am - 12pm' },
                { id: '3', time: '12pm - 1pm' },
                { id: '4', time: '1pm - 2pm' },
                { id: '5', time: '2pm - 3pm' },
                { id: '6', time: '3pm - 4pm' },
                { id: '7', time: '4pm - 5pm' },
                { id: '8', time: '5pm - 6pm' },
            ],

            //checkBox
            checked: false,
        }
    }

    checkBox(value) {
        this.setState({
            checked: !value,
        })
    }

    getAppointmentTimePage() {
        const { checked, timeSlots } = this.state;

        return (
            <View>
                <Text style={[styles.title, { marginTop: 20 }]}>Select Appointment Time:</Text>
                {<FlatList
                    data={timeSlots}
                    keyExtractor={(times) => times.id}
                    renderItem={({ item }) => {
                        return (
                            <View style={styles.containerTime}>
                                <Text style={styles.textTime}>{item.time}</Text>
                                <CheckBox
                                    value={checked}
                                    onChange={() => this.checkBox(item.id)}
                                />
                            </View>
                        );
                    }}
                />}
                <TouchableOpacity style={styles.addContainer}>
                    <Text style={styles.addText}>Add Appointment</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            <ScrollView>
                {this.getAppointmentTimePage()}
            </ScrollView>
        )
    };
};

Answer 1

您不需要将 FlatList 包装在 ScrollView 中。尝试下面的代码

import CheckBox from '@react-native-community/checkbox';

export default class FrCreateScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
        timeSlots: [
            { id: '1', time: '10am - 11am' },
            { id: '2', time: '11am - 12pm' },
            { id: '3', time: '12pm - 1pm' },
            { id: '4', time: '1pm - 2pm' },
            { id: '5', time: '2pm - 3pm' },
            { id: '6', time: '3pm - 4pm' },
            { id: '7', time: '4pm - 5pm' },
            { id: '8', time: '5pm - 6pm' },
        ],

        selectedValue: {},
    }
  }

  toggleItem = (itemId) => {
    const { selectedValue } = this.state;
    const isSelected = selectedValue[itemId];
    selectedValue[itemId] = !isSelected;

    this.setState({
      selectedValue: {...selectedValue},
    })
  }

  render() {
    const { timeSlots, selectedValue } = this.state;
    return (
      <View>
        <Text style={[styles.title, { marginTop: 20 }]}>Select Appointment Time:</Text>
        <FlatList
          data={timeSlots}
          keyExtractor={(times) => times.id}
          renderItem={({ item }) => {
            const isSelected = selectedValue[item.id];
              return (
                <View style={styles.containerTime}>
                  <Text style={styles.textTime}>{item.time}</Text>
                  <CheckBox
                    value={isSelected}
                    onChange={() => this.checkBox(item.id)}
                  />
                </View>
              );
          }}
          extraData={[selectedValue]}
        />
        <TouchableOpacity style={styles.addContainer}>
            <Text style={styles.addText}>Add Appointment</Text>
        </TouchableOpacity>
      </View>
    );
  };
};