如何在 React-Native 论文中保留 TextInput 的值？

Question

我有两个屏幕，A 和 B。屏幕 A 只包含一个 react-native-paper TextInput，例如，

            <View>
                <TextInput
                    error={error}
                    label='Enter something'
                    mode='outlined'
                    onBlur={this.onBlurHandler}
                    onChangeText={text => this.setState({text})}
                    value ={this.state.text}
                />
            </View> 

在上述情况下，当我从屏幕 A 移动到屏幕 B 时，如果我按返回键回到屏幕 A，TextInput 的值就会消失，尽管 this.state.text 拥有我在屏幕 A 上填写的任何数据。

如果我对值进行硬编码，则在从 A 导航到 B 然后返回 A 后它会保持保留。例如，

    <View>
        <TextInput
            error={error}
            label='Enter something'
            mode='outlined'
            onBlur={this.onBlurHandler}
            onChangeText={text => this.setState({text})}
            value ={'Hello World'}
        />
    </View> 

请告诉我，当我从屏幕 B 移动到屏幕 A 时，如何确保 TextInput 的值保持不变。非常感谢！

Answer 1

我通常使用 redux 来存储有助于这种情况的值。 Redux, React Redux

//reducers/inputReducer.js
import {
   UPDATE_INPUT
} from '../actions'

const initialState = {
   input = null
}

function input(state = initialState, action) {
    switch (action.type) {
        case UPDATE_INPUT: {
           return {
               ...state,
               input = action.value
           }
        }
        default:
            return state;
    }
}
export default input

//input.js
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { updateInput } from './actions.js'
...
<TextInput
            error={error}
            label='Enter something'
            mode='outlined'
            onBlur={this.onBlurHandler}
            onChangeText={text => this.props.updateInput(text)}
            value ={this.props.input}
        />
...
function mapStateToProps(state) {
    return {
        input: state.input
    }
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators(
        {
           updateInput
        },
        dispatch
    );
}

export default connect(mapStateToProps, matchDispatchToProps)(input);

//actions.js

export const UPDATE_INPUT = "UPDATE_INPUT";
export function updateInput(value) {
    return {
        type: UPDATE_INPUT,
        value: value
    }
}

注意，你还需要设置 store 和 reducer，

编辑：setup redux 的其他部分（希望我没有遗漏任何东西）

//store.js
import { createStore } from 'redux';
import combineReducers from './reducers';

const store = createStore(combineReducers);

export default store;

//reducers/index.js
import { combineReducers } from 'redux';
import input from './inputReducer';

export default combineReducers({
  input
});

//index.js

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

Answer 2

根据您所说的，屏幕 A 没有卸载，即使 this.state.text 中的值保持不变，图形上该值已被清空。就我而言，它按预期工作。

屏幕A

import React, { Component } from "react";
import { TextInput } from "react-native-paper";

export default class ScreenA extends Component {
    constructor(props) {
        super(props);
        this.state = { text: "" };
    }
    render() {
        return (
            <TextInput
                error={false}
                label="Enter something"
                mode="outlined"
                onChangeText={text => this.setState({ text })}
                onBlur={() => this.props.navigation.navigate("ScreenB")}
                value={this.state.text}
            />
        );
    }
}

屏幕B

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

export default class LoadingScreen extends Component {
    render() {
        return (
            <View>
                <Text> ScreenB </Text>
            </View>
        );
    }
}

导航器

const RoutesConfig = {
    ScreenA: {
        screen: ScreenA,
    },
    ScreenB: {
        screen: ScreenB,
    }
};

const StackNavigatorConfigs = {
    initialRouteName: "ScreenA",
};

export default createStackNavigator(RoutesConfig, StackNavigatorConfigs);

在ScreenA 中，我编写我需要的任何内容，然后在TextInput 触发onBlur 时导航到ScreenB。使用 StackNavigator 的 Header 导航回来，该值仍然保存并显示在 TextInput 中。

如果该值仍然保存在state 中（如果我理解正确的话），您可以使用react.navigation 提供的withNavigationFocus HOC。使用它，您可以查看该值是否实际存储，并查看触发重新渲染是否会以图形方式显示该值。

例如，使用我的ScreenA 示例：

import React, { Component } from "react";
import { TextInput } from "react-native-paper";
import { withNavigationFocus } from "react-navigation";

class ScreenA extends Component {
    constructor(props) {
        super(props);
        this.state = { text: "" };
    }

    componentDidUpdate = (prevProps) => { 
        if ( prevProps.isFocused === false && this.props.isFocused === true ){
            this.setState({ text : this.state.text })
        }
    }

    render() {
        return (
            <TextInput
                error={false}
                label="Enter something"
                mode="outlined"
                onChangeText={text => this.setState({ text })}
                onBlur={() => this.props.navigation.navigate("ScreenB")}
                value={this.state.text}
            />
        );
    }
}

export default withNavigationFocus(ScreenA);