Question

重新包装和重新包装的大豆，可能会减少还原剂的使用，而重新包装和重新包装的大豆的还原酶< / p>

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    TextInput
} from "react-native";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Text: '',
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    placeholder="Enter Text"
                    value={this.state.Text}
                    onChangeText={Text => this.setState({ Text })}
                />
                <Text>{this.state.Text}</Text>
            </View>
        );
    }
}
export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

我想告诉我如何重新设计此代码以将其与redux一起使用

Answer 1

请查看redux文档的示例：https://redux.js.org/basics/example。这将为您的设置提供一个很好的例子。

您需要创建一个redux store and reducers。另外，您还需要将App组件包装在Redux provider中。

对于这样的事情，您可以直接在index.js文件中创建商店，然后创建一个reducer文件夹，可能在您的src目录中。（redux文档可以指导您如何创建文件）。

我会添加一个submit按钮，这样您就不会在用户每次添加文本时都向Redux Reducer发送动作，然后添加一个函数将文本发送至Redux商店中按钮。

例如：

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput, 
  Button
} from "react-native";
import { connect } from 'react-redux';

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        Text: '',
    }
    this.submitText = this.submitText.bind(this);
  }

  submitText() {
    let { Text} = this.state;
    const { dispatch } = this.props;
    dispatch({type: <name of your action type>, payload: Text });
  }  

  render() {
    return (
        <View style={styles.container}>
            <TextInput
                placeholder="Enter Text"
                value={this.state.Text}
                onChangeText={Text => this.setState({ Text })}
            />
            <Text>{this.state.Text}</Text>
            <Text >Submit</Text>
            <Button
              onPress={this.submitText}
              title="Submit"
              color="#841584"
            />
        </View>
    );
   }
 }
 export default connect()(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
});

在导出默认情况下注意connect方法，并在submitText中进行调度。 connect方法是将组件连接到redux的方法，dispatch是将操作或数据发送到reducer以及redux存储的方法。

如何在React Native中使用Redux保存和显示文本输入的值？

1 个答案: