反应本机选择器，获取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值，并在选择器上初始化该值。 问候

只有通过redux我才能做到这一点：

我会创建一个减速器原因

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;

在该化简器中，我将初始化值和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。

希望此信息对您有帮助... 问候