Question

我只选择一个复选框，而不是多个。

如果我一个接一个地选择了两个复选框，则先前选择的复选框应未选中。

在下面的代码中，我可以选择多个复选框。

  import React ,{Component} from "react";
  import CircleCheckBox, {LABEL_POSITION} from "react-native-circle-checkbox";

  class Select_Delivery_Option extends React.Component {

    constructor(props) {
      super(props);
      const ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2
      });
      this.state = {
        check_data:[],
        dataSource: ds.cloneWithRows([]),
        checked:false,
        isLoading:false,
      };
    }

    //I had call The componentDidMount for json Data here and bind it in Data source;
    render() {
      return ();
    }

    _renderRow(rowData: string, sectionID: number, rowID: number) {
      return (
        <View style={{ flex:1,flexDirection:'column',backgroundColor:'#FFF'}}>
          <View style={{ flex:1,flexDirection:'row',backgroundColor:'#FFF'}}>
            <View style={{flexDirection:'column',margin:10}}>
              {rowData.adbHomeAddress}
              <CircleCheckBox
                checked={rowData.checked}
                onToggle={()=>this._onPressRow(rowID, rowData,rowData.checked)}
                labelPosition={LABEL_POSITION.LEFT}
                label={rowData.Address1 +" ,\n "+ rowData.Address2 +",\n"+rowData.ctiName+", "+rowData.staName+", "+rowData.ctrName+","+rowData.adbZip+"."}
                innerColor="#C72128"
                outerColor="#C72128"
                styleLabel={{color:'#000',marginLeft:10}}
              />
            </View>
          </View>
        </View>
      );
    }

    _onPressRow = (rowID,rowData,checked) => {
      const {check_data,filter} = this.state;
      console.log('rowdata',rowData);
      console.log('rowid',rowID);
      console.log('checked',checked);
      rowData.checked = !rowData.checked;
      var dataClone = this.state.check_data;
      dataClone[rowID] = rowData;
      this.setState({check_data: dataClone });
    }
}

链接到使用的CircleCheckBox组件：https://github.com/paramoshkinandrew/ReactNativeCircleCheckbox

Answer 1

我建议您使用FlatList而不是ListView，因为它更先进，更易于使用。

对于您的问题，请创建状态checkedItem: -1，然后直接分配您最后检查的商品的ID，然后只需在您的CircleCheckBox商品中添加支票即可。类似于下面的代码。

<CircleCheckBox
                checked={rowData.id === this.state.checkedItem}
                onToggle={(rowID)=> this.setState({ checkedItem: rowID})}
                labelPosition={LABEL_POSITION.LEFT}
                label={rowData.Address1 +" ,\n "+ rowData.Address2 +",\n"+rowData.ctiName+", "+rowData.staName+", "+rowData.ctrName+","+rowData.adbZip+"."}
                innerColor="#C72128"
                outerColor="#C72128"
                styleLabel={{color:'#000',marginLeft:10}}
              />

让我知道是否有任何查询。

Answer 2

我有相同的要求，却浪费时间寻找解决方案。最终，我能够自己解决问题。

在下面发布我的答案，我在示例中使用了钩子，让我知道是否有人想要基于类的解决方案。

    const checkboxComponent = () => {

      const [checkboxValue, setCheckboxValue] = React.useState([
       { label: 'Customer', value: 'customer', checked: false },
       { label: 'Merchant', value: 'merchant', checked: false },
       { label: 'None', value: 'none', checked: false },
     ])
 
     const checkboxHandler = (value, index) => {
       const newValue = checkboxValue.map((checkbox, i) => {
        if (i !== index)
          return {
            ...checkbox,
            checked: false,
          }
        if (i === index) {
          const item = {
            ...checkbox,
            checked: !checkbox.checked,
          }
          return item
        }
       return checkbox
     })
     setCheckboxValue(newValue)
     }    

    return (
       <View>
        {checkboxValue.map((checkbox, i) => (
            <View style={styles.checkboxContainer} key={i}>
              <CheckBox
                value={checkbox.checked}
                onValueChange={(value) => checkboxHandler(value, i)}
              />
              <Text style={styles.label}>{checkbox.label}</Text>
            </View>
          ))}

       </View>
     )
    }
     export default checkboxComponent

从本机列表视图中选择单个复选框

2 个答案: