React Native:是否有办法将选择器重置为初始状态?

Question

是否有一种方法将选择器重置为初始状态，当我单击onChangeCheckbox时，它首次显示?在我的例子中，我显示了复选框和选择器，我只需要显示当我进入屏幕时选择器中的初始信息。

这是复选框

const onChangeCheckbox = (n, newValue, item) => {
console.log('onChangeCheckbox n,newValue: ', n, newValue);
const newArray = [...checkboxDisplay];
newArray[n] = !checkboxDisplay[n]; // refresh available device
setCheckboxDisplay(newArray);
const [aSerialArray, serialBoolArray] =filterDevicesByUserId (n, deviceTypeSelected[n],item, newValue);
resetNumberAndDegem(n, aSerialArray);
};

这是选择器

function ElementDeviceType(props) {
const index = props.index;
const item = props.item;
const color = deviceTypePickerEnable[index] ? 'white' : 'gray';
return (
<View style={styles.deviceTextView}>
<Text style={[styles.label1, { color: color }]}>device:</Text>
<View style={styles.deviceBoxView}>
<Picker
mode="dropdown"
enabled={deviceTypePickerEnable[index]}
selectedValue={deviceTypeSelected[index]}
style={styles.devicePicker}
onValueChange={(newValue) => onChangeDeviceType(index, newValue,item)}
>
<Picker.Item label="choose device" value="" enabled={false} color={'#ddd'} itemStyle={{
color: '#ccc'
}} />
{deviceTypeDisplayed[index].map((elem, i) => (
<Picker.Item
label={getDeviceTestName(elem)}
value={elem}
key={i}
/>
))}
</Picker>
</View>
</View>
);
}

这是选择器的onChangeDeviceType函数

const onChangeDeviceType = (n, newDeviceType,item) => {
console.log('onChangeDeviceType n,newDeviceType,item:', n, newDeviceType,item);
if(newDeviceType != ''){
const newATyperray = [...deviceTypeSelected];
newATyperray[n] = newDeviceType;
setDeviceTypeSelected(newATyperray);

const [aSerialArray, serialBoolArray] =filterDevicesByUserId (n, newDeviceType,item,checkboxDisplay[n]) ;

const deviceArrayS = [...deviceNumberSelected];
deviceArrayS[n] = aSerialArray[0]; // set the selected serial to the 1st available
onChangeDeviceNumber(n, aSerialArray[0],item);
updateAllInputs(
UPDATE_TYPE.DEVICE_TYPE,
newATyperray,
deviceArrayS,
serialBoolArray
);
}
};

Answer 1

你可以在react-native钩子的帮助下完成。

这里是一个示例代码供您参考:https://thewebdev.info/2021/02/05/how-to-reset-to-initial-state-with-react-hooks/