代码之家 › 专栏 › 技术社区 › geyser

React Redux toolkit-输入字段的状态管理

redux-toolkit redux react-native reactjs

geyser · 技术社区 · 2 年前

我正在用React Native开发一个应用程序,并开始学习redux工具包。

以前我在本地管理我的州。

由于某些原因,我无法理解如何使用redux工具箱保存文本字段的动态输入。

我能找到的所有例子都包含本地(setState)。

我成功地处理了所有的支票和计数器。。但我在尝试处理“onChangeText”函数时仍会收到错误。

我试图将“odo”读数填充为15,然后允许用户将其更改为正确的数字。目前我的代码返回“undefined do this work”。

我搜索了论坛、官方文档和youtube,但找不到任何与工具箱(分派/负载)相关的例子。

谢谢你的帮助!

//SLICE

import {
  createSlice
} from "@reduxjs/toolkit";

export const pickupInputSlice = createSlice({
  name: 'pickupInput',
  initialState: {
    odo: '15',
    waitTime: '11',
    notes: '12',
  },
  reducers: {
    odo: (state, action) => {
      state.odo = action.payload + "did this work";
    },
    waitTime: (state, action) => {
      state.waitTime = action.payload;
    },
    notes: (state, action) => {
      state.notes = action.payload;
    },
  }
});

export const {
  odo,
  waitTime,
  notes
} = pickupInputSlice.actions;

export default pickupInputSlice.reducer;


//SCREEN 

const odoReading = useSelector((state) => state.pickupInput.odo)


  <
  View >
  <
  Text style = {
    styles.checklistText
  } >
  Odometer Reading <
  /Text> <
  TextInput
style = {
  styles.checklistTextInput
}
autoCapitalize = 'none'
autoCorrect = {
  false
}
keyboardType = 'number-pad'
maxLength = {
  6
}
value = {
  odoReading
}
onChangeText = {
  () => dispatch(odo(odo.payload))
}
/> <
/View>

1 回复 | 直到 2 年前

Inder 2 年前

必须将从onChangeText接收到的值传递给odo函数

<View>
  <Text style={styles.checklistText}>Odometer Reading </Text>
  <TextInput
    style={styles.checklistTextInput}
    autoCapitalize="none"
    autoCorrect={false}
    keyboardType="number-pad"
    maxLength={6}
    value={odoReading}
    onChangeText={value => dispatch(odo(value))} // pass value to reducer function as payload
  />
</View>;

推荐文章