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

Posted 2023-04-18

【中文标题】React Native 和处理 TextInput 数据的正确方法？

【英文标题】：React Native and right way to handle TextInput data?

【发布时间】：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 );

【参考方案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
            />
        );