时间戳

首页 > 解决方案 > 从 React-native 的列表视图中选择单个复选框

react-native - 从 React-native 的列表视图中选择单个复选框

问题描述

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

如果我一一选择两个复选框，则应取消选中先前选择的复选框。

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

  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

标签： react-native

解决方案

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

在下面发布我的答案，我在示例中使用了钩子，如果有人想要基于类的解决方案，请告诉我。

    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

推荐阅读