Question

我有一个状态结构数组，称为“设备”。它具有ID（项目ID），名称（项目名称），续订（DDL中的字符串值）和 check（布尔值，是否选中了复选框）

这些信息将一一显示为项目。

虽然我在显示姓名和ID时没有问题，但我的问题实际上在续订和支票上，但我想先解决支票。

我在复选框上尝试了以下操作：

            <CheckBox 
            checked={item.check}
            onPress ={ () =>{
              if (item.check === false){
                item.check = true
              }
              else {
                item.check = false
              }
            }}
            />

（我使用 item 而不是 this.state.devices ，因为我映射了数组）

这是我创建设备的地方：

  constructor() {
    super();
    this.state = {
      devices: [
  {
    check: false,
    name: 'PHONE',
    id: '01658',
    renew: '',
  },
  {
    check: false,
    name: 'PHONE',
    id: '04523',
    renew: ''
  },
  {
    check: false,
    name: 'LAPTOP',
    id: '04451',
    renew: ''
  },
  {
    check: false,
    name: 'PHONE',
    id: '01165',
    renew: ''
  },
  {
    check: false,
    name: 'TABLET',
    id: '01015',
    renew: ''
  },
  ]
    };
  }

这是数组映射开始的地方，也是我选中该复选框的地方：

  render() {
    return (
    <ScrollView style={styles.container}>
      {this.state.devices.map((item, index) => {
          console.log("start");
          return (
            <React.Fragment key={index}>
              <View style={styles.itemRow}>

                  <View style={styles.itemCell}>
                    <CheckBox 
                    checked={item.check}
                    onPress ={ () =>{
                      if (item.check === false){
                        item.check = true
                      }
                      else {
                        item.check = false
                      }
                    }}
                    />
                  </View>

我希望该复选框在按下时会更改其值，然后将布尔值写入相应索引的item.check上。发生的情况是复选框值一次全部更改了；或者或值根本不会改变。

Answer 1

您必须执行setState来更新复选框。例如，您可以执行以下操作：

onPress={()=>this.handleCheck(item.id}

handleCheck是：

handleCheck = (id) => {
    let tempArr = this.state.devices
    let updatedArr=tempArr.map(item => {
        if (item.id === id) {
            item.check = !item.check
            return item
        }
        return item
    })
    this.setState({devices:updatedArr})
}

布尔值数组是否为复选框值？

1 个答案: