具有独立状态的动态生成的复选框 React-Native答案

【问题标题】：Dynamically Generated Checkboxes with Separate States React-Native具有独立状态的动态生成的复选框 React-Native
【发布时间】：2018-08-07 16:55:40
【问题描述】：

我有正在生成的产品列表，每个产品都有一个与之关联的复选框。现在我所有的复选框都共享相同的状态，所以当你选中一个时，它们最终都会被选中。包含复选框的产品数据处于循环状态，如何生成具有不同状态的复选框？我正在使用 React Native 和复选框组件正在使用 react-native-elements

      <View>
        {products.map((value, key) => {
          return (
            <View
              key={value.serialNumber + key}
              style={localStyles.productCheckbox}
            >
              <Text key={value._id + key} style={localStyles.modalText}>
                {value.pModel}
              </Text>
              <Text
                key={value.pModel + key}
                style={localStyles.modalText}
              >
                {value.serialNumber}
              </Text>
              <Text
                key={value.pVersion + key}
                style={localStyles.modalText}
              >
                {value.versionNumber}
              </Text>
              <CheckBox
                checked={this.state.checked}
                onPress={() => {
                  this.setState({ checked: !this.state.checked });
                }}
                key={value._id}
              />
            </View>

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

不要使用 bool 值，而是使用一个数组来存储所有选中项的 id。

像这样：

this.state = {
   ....
   checked: [],
   ....
}

现在检查每个复选框的 id 是否存在于 not 数组中：

<CheckBox
   checked={this.state.checked.includes(value._id)}

更新 onPress 事件处理程序中的状态数组：

onPress={(e) => this.handleCheckbox(value._id, e)}

handleCheckbox(id, e) {

    // check whether item is checked or unchecked on the basis of add and remove

    if (/* checked */) {
        this.setState((prevstate) => ({
            checked: [...prevState.checked, id]
        }))
    } else {
        this.setState((prevstate) => ({
            checked: prevState.checked.filter(el => el != id)
        }))
    }
}

【讨论】：

嘿，谢谢，if (/* checked */) {} 是什么意思，你的意思是像检查状态还是像循环遍历数组以查看检查了什么或什么？
意味着在event.target.checked（不确定react-native）之类的事件中会有一些值来检查是否在取消选中或选中复选框时调用事件。

【解决方案2】：

您需要在您的状态下制作一个字典，使用复选框的唯一 id 作为键，值将是选中状态。

 // setting up your state in the ctor
 this.state = { checkboxValues : {} }


 <View>
        {products.map((value, key) => {
          const uniqueKey = value.serialNumber + key; // Unique identifier could probably be just the serial number i presume..
          return (
            <View
              key={uniqueKey}
              style={localStyles.productCheckbox}
            >
              <Text key={value._id + key} style={localStyles.modalText}>
                {value.pModel}
              </Text>
              <Text
                key={value.pModel + key}
                style={localStyles.modalText}
              >
                {value.serialNumber}
              </Text>
              <Text
                key={value.pVersion + key}
                style={localStyles.modalText}
              >
                {value.versionNumber}
              </Text>
              <CheckBox
                checked={this.state.checkboxValues[uniqueKey].checked} // read from the state dictionary based on the id
                onPress={() => {
                  // assign a new checked state based on the unique id. You'll also need to do some error/undefined checking here.
                  const newCheckboxValues = this.state.checkboxValues;
                  newCheckboxValues[uniqueKey].checked = !newCheckboxValues[uniqueKey].checked
                  this.setState({ checkboxValues: newCheckboxValues });
                }}
                key={value._id}
              />
            </View>

【讨论】：

【解决方案3】：

嗨，最近我也偶然发现了这个问题，它似乎很容易解决，但我花了很多时间来解决它。下面的代码在状态中创建动态键值对。如果你 console.log 渲染你的状态，你会看到 (check0:true check1:true check2: false ....) 希望我的解决方案能帮助别人。

<Switch
     value={this.state[`check${key}`]}
     onValueChange={value => this.setState({ [`check${key}`]: value })}
/>

【讨论】：