Question

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

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

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

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

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

Answer 1

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

Answer 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（说实话，你应该避免使用哪种用法）

Answer 3

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

请参见下面的示例。

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}
            />
        );
    }
}

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

3 个答案: