Question

我尝试从state内<TextInput>设置一个Int值，首先将其转换为string（<TextInput>只能接收一个字符串）然后我希望能够更改值并使用新的<TextInput/>值更新状态值。当我尝试更改<TextInput/>

中的值时

我收到错误： undefined is not an object (evaluating 'this.state.keys.toString')

更新：

我从this移除了this.keyInt，现在我在输入更新时收到NaN，错误消失了

React-Native代码：

class Counter extends Component {
constructor(props) {
    super(props);
    this.state = { 
        keys: 0,
        id: this.props.id
     };
}


updateKeysWithInputHandler = (e) => {
    keyInt = parseInt(e.target.value);
    console.log(`keyInt is: ${keyInt}`);
    this.setState({
        keys: keyInt
    })
}

render() {
    return (
        <View style={styles.container}>
            <TextInput 
                id={this.props.id}
                style={styles.title}
                keyboardType='numeric'
                maxLength={2}
                value={this.state.keys.toString()}
                onChange={this.updateKeysWithInputHandler}
            />
        </View>
    );
}

Answer 1

好的我通过this帖子和Adam Azad的帮助解决了我的问题。

显然反应原生<TextInput/>不要使用target而是使用nativeEvent.text，所以我改变了我的代码，现在就可以了。

工作代码：

updateKeysWithInputHandler = (val) => {
    keyInt = parseInt(val);
    console.log(val);
    this.setState({
        keys: keyInt
    })
}

render() {
    return (
        <View style={styles.container}>
            <TextInput 
                id={this.props.id}
                style={styles.title}
                keyboardType='numeric'
                maxLength={2}
                value={this.state.keys.toString()}
                onChange={(event) => this.updateKeysWithInputHandler(event.nativeEvent.text)}
            />
        </View>
    );
}

}

Answer 2

this.setState({
   keys: this.keyInt
   // ___^^^^^
})

删除this关键字，因为它将上下文从当前范围更改为Counter范围，其中未定义keyInt变量。

Answer 3

为什么keys: this.keyInt？

不应该是keys: keyInt吗？

在native-native TextInput中的parseInt（）之后的值是NaN

3 个答案: