关于input value碰上null的时候



  • /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     */
    'use strict';
    
    import React, { Component } from 'react';
    
    import {
      Alert, AppRegistry, View, TextInput, Dimensions, TouchableOpacity, StyleSheet, Text} from 'react-native';
    const fullWidth = Dimensions.get('window').width;
    const styles = StyleSheet.create({
    
      inputText: {
        height: 40,
        width: (fullWidth - 20) * 0.8,
        borderBottomColor: '#EEEEEE',
        borderWidth: 1,
      },
      button: {
        alignItems: 'center',
        justifyContent: 'center',
        width: (fullWidth - 20) * 0.2,
        backgroundColor: '#aae999',
        padding: 10,
        borderRadius: 10,
      }
    });
    
    class TestClass extends Component {
      constructor(props) {
        super(props);
    
        this.state = {
          text: null,
          placeholder: 'mmmm'
        }
      }
      doClick() {
        const text = this.state.text;
        if (text === "1") {
          this.setState({ text: "2" });
        }
        if (text === "2") {
          this.setState({ text: "3" });
        }
        if (text === "3") {
          this.setState({ text: "4" });
        }
        if (text === "4") {
          this.setState({ text: null, placeholder: 'haha' });
        }
      }
      render() {
        return (
          <View >
            <TextInput keyboardType="numeric"
              value={this.state.text}
              placeholder={this.state.placeholder}
              onChangeText={(text) => this.setState({ text }) }
              style={styles.inputText} />
    
            <TouchableOpacity onPress={this.doClick.bind(this) } style={styles.button}>
              <Text style={styles.buttonText}>添加</Text>
            </TouchableOpacity>
    
          </View>
        );
      }
    };
    
    AppRegistry.registerComponent('TimeSheet', () => TestClass);
    


  • 操作步骤:第一次输入1,然后单击,输入框变成2,再单击按钮,一直到输入框变成4,再次单击,预期应该是输入框变成空,因为this.setState({ text: null, placeholder: 'haha' });。

    结果是变成1了。何解?


  • administrators

    @lawrence 说:

    keyboardType="numeric"

    大概因为你指定了keyboardType="numeric" ?null因而是一个非法值,然后有某种纠正的机制?我猜的



  • 我猜是textinput的输入值的问题。当value=null时,由于第一次输入1时,是手动录入的,textinput的输入就变成1了,后续所有的按钮事件,改变的是整个组件的state。但这里面的细节没整的太明白。



  • 我用同样的代码实现了一次react js。没有这个怪问题。我们感觉是native的textinput控件的bug。



  • TextInput要设置为空,得设为'' (空字符串)。


登录后回复