React Native：Picker与Input联动时保持选中值的问题求助

我明白你遇到的问题了——当选中"Other"并在输入框输入内容时，Picker的标签会变成输入的文本，这是因为你把Picker的selectedValue直接绑定到了Redux中的subject，而输入内容会更新subject为不在Picker选项列表里的值，Picker找不到对应label就会直接显示selectedValue本身。

下面是具体的解决方案，核心思路是分开管理Picker的选中状态和自定义输入值，同时保证最终Redux的subject符合你的需求：

步骤1：调整本地状态，新增Picker选中状态管理 #

原来的本地状态只存了subjectSelected，现在我们需要单独管理Picker的选中项，避免和自定义输入值冲突：

const [pickerSelected, setPickerSelected] = useState('');

步骤2：初始化同步Redux值到本地状态 #

在组件挂载或Redux的subject变化时，自动同步本地Picker状态：

useEffect(() => {
  // 如果Redux中的subject是A/B，直接设置为Picker选中项
  if (['A', 'B'].includes(subject)) {
    setPickerSelected(subject);
  } else {
    // 否则设置为Other，同时输入框会显示subject的自定义内容
    setPickerSelected('Other');
  }
}, [subject]);

步骤3：修改Picker组件的绑定逻辑 #

把Picker的selectedValue绑定到本地的pickerSelected，而不是Redux的subject，并调整onValueChange的逻辑：

<Picker 
  mode='dropdown' 
  selectedValue={pickerSelected} 
  onValueChange={(value) => {
    setPickerSelected(value);
    // 如果选中的是A/B，直接更新Redux的subject
    if (value !== 'Other') {
      changeBeneficiarySubject(value);
    } else {
      // 选中Other时，可以先把Redux的subject设为空，或者保留之前的自定义值
      // 这里根据你的需求调整，比如设为空让输入框从头开始输入
      // changeBeneficiarySubject('');
    }
  }}
>
  {subjects.map((sub, key) => (
    <Picker.Item key={key} label={sub.label} value={sub.value} />
  ))}
</Picker>

步骤4：调整Input组件的绑定逻辑 #

输入框的值直接绑定Redux的subject，输入时正常更新即可：

{pickerSelected === 'Other' && (
  <Input 
    value={subject} 
    onChangeText={(text) => {
      changeBeneficiarySubject(text);
    }} 
    placeholder="请输入自定义内容"
  />
)}

完整修改后的核心代码 #

import { Picker, ScrollView, useEffect, useState } from 'react-native';
import { connect } from 'react-redux';
import { changeBeneficiarySubject } from '../your-action-path'; // 替换为你的action路径

const subjects = [
  { label: 'A', value: 'A' },
  { label: 'B', value: 'B' },
  { label: 'Other', value: 'Other' }
];

const BeneficiaryExtraInfo = ({ subject, changeBeneficiarySubject }) => {
  const [pickerSelected, setPickerSelected] = useState('');

  useEffect(() => {
    if (['A', 'B'].includes(subject)) {
      setPickerSelected(subject);
    } else {
      setPickerSelected('Other');
    }
  }, [subject]);

  return (
    <ScrollView>
      <Picker 
        mode='dropdown' 
        selectedValue={pickerSelected} 
        onValueChange={(value) => {
          setPickerSelected(value);
          if (value !== 'Other') {
            changeBeneficiarySubject(value);
          }
        }}
      >
        {subjects.map((sub, key) => (
          <Picker.Item key={key} label={sub.label} value={sub.value} />
        ))}
      </Picker>

      {pickerSelected === 'Other' && (
        <Input 
          value={subject} 
          onChangeText={(text) => changeBeneficiarySubject(text)}
          placeholder="请输入自定义内容"
        />
      )}
    </ScrollView>
  );
};

const mapStateToProps = ({ transaction }) => ({
  subject: transaction.receiver.subject
});

const mapDispatchToProps = { changeBeneficiarySubject };

export default connect(mapStateToProps, mapDispatchToProps)(BeneficiaryExtraInfo);

这样修改后，Picker的选中状态由本地pickerSelected管理，永远只会在A/B/Other三个选项中切换，不会因为输入框的内容而改变标签；而Redux的subject则根据规则更新：选中A/B时设为对应值，选中Other时设为输入框的文本，完美符合你的需求。

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