native react 二級菜單_react-native-picker兩級關聯

因為我們背景要傳二級分類的ID到背景，首先我們拿到該元件規範的資料格式，和原資料。然後跟選擇過後的資料名拿到和原資料名比較，如果相同則取得ID，

首先要拼接你自己的資料

createData = async () => {

const result = await reqAllClass()

let mockData1 = [];

result.forEach((item) => {

let _firData = {};

let secData = []

item.classify2List.forEach(item2 => {

secData.push(item2.name)

})

let str = item.name

_firData[str] = secData

mockData1.push(_firData)

})

this.setState({

pickerData: mockData1,

mockData: result

})

}

showDemoModal() {

Keyboard.dismiss()

Picker.init({

pickerTitleText: '請選擇商品分類',

pickerCancelBtnText: '取消',

pickerConfirmBtnText: '确定',

pickerCancelBtnColor: [123, 123, 123, 1],

pickerConfirmBtnColor: [45, 202, 150, 1],

pickerData: this.state.pickerData,

pickerBg: [255, 255, 255, 1],

pickerFontColor: [45, 202, 150, 1],

onPickerConfirm: data => {

this.state.mockData.forEach(item => {

item.classify2List.forEach(item2 => {

if (item2.name === data[1] && item.name === data[0]) {

this.setState({

className : item.name,

twoClassName : item2.name,

classId : item2.id

})

}

})

})

},

onPickerCancel: data => {

//console.log(data);

},

onPickerSelect: data => {

// console.log(data);

}

});

Picker.show();

}

componentDidMount() {

this.createData()

}