React Native中选中选项后如何填充可搜索下拉框文本？

核心问题 #

你误用了defaultValue绑定状态，defaultValue是非受控属性，仅在组件初始化时生效，后续状态更新无法同步到输入框。需要改用受控属性value来绑定searchQuery状态。

修改后的完整代码 #

const StandSearch = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedStand, setSelectedStand] = useState(null);

  const { stands } = standData;

  const filteredStands = stands.filter((stand) =>
    stand.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <View style={styles.dropdownContainer}>
      <SearchableDropdown
        onItemSelect={(item) => {
          setSelectedStand(item);
          setSearchQuery(item.name); // 同步选中项到搜索状态
        }}
        onTextChange={(text) => setSearchQuery(text)}
        textInputStyle={styles.dropdownInput}
        itemStyle={styles.dropdownItem}
        itemTextStyle={styles.dropdownItemText}
        items={filteredStands}
        placeholder="Type any stand to begin"
        resetValue={false}
        value={searchQuery} // 替换defaultValue为受控的value属性
      />
    </View>
  );
};

关键修改说明 #

• 替换defaultValue为value：这是React受控组件的标准写法，状态变化会实时同步到输入框内容，解决选中后不填充的核心问题。
• 保留resetValue={false}：确保选中选项后不会自动清空输入框，符合你需要先填充再提交的需求。

额外排查点 #

1. 检查组件版本：如果使用的是react-native-searchable-dropdown旧版本，可能存在受控属性兼容问题，建议升级到最新稳定版。
2. 确认字段正确性：确保选中的item对象确实包含非空的name字段，避免因字段不存在导致填充失败。

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