0

我有一个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>

Then, I need to render an Inputcomponent only if the item "Other" is picked.

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

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

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

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

4

2 回答 2

0

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

只有使用 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;

在这个 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。

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

于 2020-09-15T16:01:06.920 回答
0

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

于 2020-09-15T15:48:58.730 回答