React Native下拉列表优化：支持选择选项与输入自定义值

当前实现的核心问题是输入框状态未与用户输入实时绑定，且仅在选择下拉选项时才更新selectedValue，导致自定义输入内容无法被保存。以下是具体修改点：

1. 绑定TextInput的value到状态 #

将defaultValue={selectedValue}替换为value={selectedValue}，确保输入框内容与selectedValue状态完全同步，用户输入的内容能实时显示在输入框中。

2. 修改onChangeText逻辑 #

原onChangeText仅触发下拉列表查询，未更新状态。需要同时同步用户输入的内容到selectedValue：

onChangeText={text => {
  setSelectedValue(text); // 实时记录用户输入内容
  selectValue(text); // 同时触发下拉列表查询
}}

3. 处理输入完成事件（Done键） #

添加onSubmitEditing回调，当用户按下Done键时，确认当前自定义输入值并关闭下拉：

onSubmitEditing={() => {
  setShowValueDropdown(false);
  // 可选：在这里添加自定义值的验证或保存逻辑
}}

4. 修正代码拼写错误 #

• handelSelectedValues → handleSelectedValues（函数名拼写错误）
• listofValues → listOfValues（变量名大小写不一致，导致渲染条件失效）

修改后的完整代码示例 #

const [showValueDropdown, setShowValueDropdown] = useState<boolean>(false);
const [selectedValue, setSelectedValue] = useState('');

// 选择下拉选项的处理函数
const handleSelectedValues = (value: IValue): void => {
  setShowValueDropdown(false);
  const valueData = `${value.name} (${value.secondName})`;
  setSelectedValue(valueData);
};

// 获取下拉列表数据的函数
const selectValue = async (term: string): Promise<void> => {
  const code = await LocalStorage.get(CODE);
  dispatch(valueData({ CODE, term }));
  setShowValueDropdown(term.length > 0);
};

return (
  <View>
    <View>
      <View>            
        <TextInput
          editable={true}
          placeholder={placeholder}
          returnKeyType='done'
          autoCorrect={false}
          value={selectedValue} // 绑定状态到输入框
          onChangeText={text => {
            setSelectedValue(text); // 实时同步输入内容
            selectValue(text);
          }}
          onSubmitEditing={() => {
            setShowValueDropdown(false); // 按下Done关闭下拉
          }}
        />
      </View>
    </View>

    {/* 修正变量名拼写错误 */}
    {listOfValues.length > 0 && showValueDropdown && (
      <View>
        {listOfValues.map((value, ind) => (
          <View key={ind}>
            <Text
              onPress={() => {
                handleSelectedValues(value); // 修正函数名拼写
              }}
            >
              {value.name} ({value.nameSecond})
            </Text>
          </View>
        ))}
      </View>
    )}
  </View>
);

额外优化建议 #

• 可以用TouchableWithoutFeedback包裹外层View，添加点击外部关闭下拉的逻辑，提升交互体验
• 若需要对自定义输入值做格式校验，可在onSubmitEditing或onBlur事件中添加处理逻辑

内容的提问来源于stack exchange，提问作者coder03