javascript - 在react-native TextInput中parseInt()之后值为NaN

Question

我正在尝试设置 state 中的 Int 值里面 <TextInput>首先将其变成 string ( <TextInput> 只能接收字符串)，然后我希望能够更改该值并使用新的 <TextInput/> 更新状态值值(value)。当我尝试更改 <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的帮助这让我明白了我的问题。

显然是react-native <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>
    );
}

}