React Native Picker，获取 selectedValue

Question

我有一个像这样的Picker 组件：

const reasons = [
  { name: 'A' },
  { name: 'B' },
  { name: 'Other' }
];

<Picker
  selectedValue={state.reasonSelected}
  onValueChange={value => {
    changeTransactionReason(value);
  }}
>
  {reasons.map((reason, key) => (
    <Picker.Item
      key={key}
      label={reason.name}
      value={reason.name}
    />
  ))}
</Picker>

然后，只有当“其他”项被选中时，我才需要渲染一个 Input 组件。

我可以设置该值，然后询问是否：

{state.itemSelected === 'Other' && (
  <Input onChangeText={text => { reduxActionToSaveValue(text) }}/>
)}

但我不想混合本地状态和 redux。这些值将存储在 redux 上，但是

如何在不丢失实际值的情况下比较“其他”值？所以我想知道Picker 是否有办法在不设置本地状态的情况下获取所选值

Answer 1

为什么不直接用redux比较值呢？如果您使用 react-redux，您可以使用 mapStateToProps (here is the documentation) 映射存储所选项目的值，如果您直接使用 redux，您仍然可以这样做。那么一旦选择其他的动作已经发送并且值被设置，你的输入就会显示出来。

Answer 2

如果不想使用redux，需要从props中获取Other值，并在picker上初始化该值。 问候

只有使用 redux 我才会这样做：

我会创建reducer的原因

const intialState = {
  reasonSelected: '1',
  reasons: [{name: '1'}, {name: '2'}, {name: '3'}],
};

const reasons = (state = intialState, {type, payload}) => {
  switch (type) {
    case 'CHANGE_SELECTED':
      return payload;
    default:
      return state;
  }
};

export default reasons;

在这个 reducer 中，我将初始化值和 selecteddefault，并创建一个动作 CHANGE_SLECTED 来更改所选值。

在我称之为减速器的组件中，我称之为仪表板。

import React from 'react';
import {View, Text, Picker} from 'react-native';

import {useSelector, useDispatch} from 'react-redux';

const Dashboard = () => {
  const reasonObj = useSelector((state) => state.reasons);

  const dispatch = useDispatch();

  const onValuePickChange = (value) => {
    dispatch({
      type: 'CHANGE_SELECTED',
      payload: {
        reasonSelected: value,
        reasons: reasonObj.reasons,
      },
    });
  };
  return (
    <View>
      <Text>Dashboard</Text>
      <Picker
        selectedValue={reasonObj.reasonSelected}
        onValueChange={(value) => onValuePickChange(value)}>
        {reasonObj.reasons.length > 0 &&
          reasonObj.reasons.map((reason, key) => (
            <Picker.Item key={key} label={reason.name} value={reason.name} />
          ))}
      </Picker>
    </View>
  );
};

export default Dashboard;

在这种形式中，您没有使用本地状态，所有内容都会立即更新到 redux。

希望这些信息对您有所帮助... 问候