react-native中有一个下拉框和三个文本框,当下拉框选择内容为YES,三个文本框可以输入文本内容。当下拉框内容为NO时,三个文本框不能输入任何内容(被禁用)。为了数据安全,一开始下拉框选择为YES,输入数据,下拉框变更为NO时,自动清除三个文本框内容。
时间: 2023-05-21 10:07:23 浏览: 74
你需要使用onChange事件来监听下拉框的变化,当下拉框的值从YES变为NO时,需要将三个文本框的值设置为空并且禁用它们。代码示例如下:
```
import React, { useState } from 'react';
import { View, Text, TextInput, Picker } from 'react-native';
const App = () => {
const [dropDownValue, setDropDownValue] = useState('YES');
const [textInput1Value, setTextInput1Value] = useState('');
const [textInput2Value, setTextInput2Value] = useState('');
const [textInput3Value, setTextInput3Value] = useState('');
const handleDropDownChange = (value) => {
if (value === 'NO') {
setTextInput1Value('');
setTextInput2Value('');
setTextInput3Value('');
}
setDropDownValue(value);
};
return (
<View>
<Picker selectedValue={dropDownValue} onValueChange={handleDropDownChange}>
<Picker.Item label="YES" value="YES" />
<Picker.Item label="NO" value="NO" />
</Picker>
<TextInput
value={textInput1Value}
onChangeText={setTextInput1Value}
editable={dropDownValue === 'YES'}
/>
<TextInput
value={textInput2Value}
onChangeText={setTextInput2Value}
editable={dropDownValue === 'YES'}
/>
<TextInput
value={textInput3Value}
onChangeText={setTextInput3Value}
editable={dropDownValue === 'YES'}
/>
</View>
);
};
export default App;
```
当下拉框的值为NO时,三个文本框的editable属性都会被设置为false,使其变为只读状态。并且当下拉框的值变为NO时,handleDropDownChange函数会将三个文本框的值设置为空。