React Native 和处理 TextInput 数据的正确方法？答案

【问题标题】：React Native and right way to handle TextInput data?React Native 和处理 TextInput 数据的正确方法？
【发布时间】：2017-04-23 13:19:22
【问题描述】：

我正在使用 react-native-maps 制作一个应用程序，现在我正在添加一个 UI。

我遇到了这个问题，如果Value 与onChangeText 上将更新的值相同，我无法更改TextInput 上的文本。我打字时它被清空了。

我通过在更改值后立即添加 this.forceUpdate() 解决了这个问题，但这会使应用程序有点滞后，并且当我输入文本时地图上的标记会闪烁。

该值有时由代码更改，但有时由用户编辑并由代码读取。处理这个问题的正确方法是什么？ forceUpdate 感觉不对……

<TextInput
    keyboardType={'numeric'}
    style = {styles.textInput}
    value = {this.state.tmpCustomer.phoneNumber}                    
    onChangeText ={(text) => {this.state.tmpCustomer.phoneNumber=text; this.forceUpdate()}}
/>

【问题讨论】：

也许setState 会起作用？我如何setState 对象内的值 (tmpCustomer) ？我试过了，但出现错误（意外令牌）：onChangeText ={(text) => this.setState({tmpCustomer: { phoneNumber: text }); }

标签： android user-interface reactjs native textinput

【解决方案1】：

我通过将onChangeText 切换为onEndEditing 并删除value 并使用setNativeProps 来更改文本来修复滞后。 https://facebook.github.io/react-native/docs/direct-manipulation.html

【讨论】：

我遇到了一个非常滞后的键盘 + onKeyPress。通过从中删除value，它在Android 上改进了很多！非常感谢！

【解决方案2】：

你试过了吗？

<TextInput
    keyboardType={'numeric'}
    style = {styles.textInput}
    value = {this.state.tmpCustomer.phoneNumber}                    
    onChangeText ={(text) => { 
        const {tmpCustomer} = this.state;
        tmpCustomer.phoneNumber = text;
        this.setState({tmpCustomer : tmpCustomer});
    }}
/>

setState() 会更新组件，所以不需要forceUpdate（说实话，你应该避免这种用法）

【讨论】：

【解决方案3】：

我也遇到了 React Native 的 TextInput 的性能问题。我通过使用defaultValue 而不是value 解决了这个问题，并允许组件在使用shouldComponentUpdate() 发生焦点/模糊事件时重新渲染仅。

请参阅下面的示例。

export default class TextField extends React.Component {
    state = {
        value: '',
        touched: false
    };

    handleChange = (text) => {
        this.setState({
            value: text
        });
    };

    handleFocus = () => {
        this.setState({
            touched: true
        });
    };

    handleBlur = () => {
        this.setState({
            touched: false
        });
    };

    shouldComponentUpdate(nextProps, nextState) {
        const currentTouched = this.state.touched;
        const nextTouched = nextState.touched;

        // Re-render when the user has focused or unfocused the text field
        return (currentTouched !== nextTouched);
    }

    render() {
        const {value} = this.state;

        return (
            <TextInput
                // Use defaultValue to set the text field's default value upon render
                defaultValue={value}
                onFocus={this.handleFocus}
                onBlur={this.handleBlur}
                onChangeText={this.handleChange}
            />
        );
    }
}

【讨论】：