Question

我有正在生成的产品列表，每个产品都有与其关联的复选框。现在，我所有的复选框都共享相同的状态，因此当您选中一个复选框时，所有的复选框最终都会被选中。包括复选框在内的产品数据处于循环中，如何生成具有不同状态的复选框？我正在使用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>

Answer 1

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

赞：

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)
        }))
    }
}

Answer 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>

Answer 3

最近，我也偶然发现了这个问题，似乎很容易解决，但是我花了很多时间解决它。以下代码在状态下创建动态键值对。如果您用console.log记录渲染器中的状态，您会看到（check0：true check1：true check2：false ....）希望我的解决方案能对您有所帮助。

} else if (!isset($_POST['submit'])) {
    header("Location: index.php");
}

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

3 个答案: