反应本机最后一个 textInput 框最后没有设置值 onChange

Question

我有一组4人

TextInput

前三个在'onChange'方法中设置值正常，但最后一个没有设置？

    onChange(index : number, value : string) {
    console.log(`onChange with index ${index} and val ${value}`);

    switch (index) {
        case 0:
            console.log('capador 1');
            this.setState({firstVal : value});

            break;
        case 1:
        console.log('capador 2');
            this.setState({secondVal : value});
            break;
        case 2:
        console.log('capador 3');
            this.setState({thirdVal : value});
            break;
        case 3:
        console.log('capador 4');
            this.setState({fourthVal : value});
            break;

    }


    if (index === 3) {
        console.log(`ya aya con input : ${this.state.firstVal}`);
        console.log(`ya aya con input : ${this.state.secondVal}`);
        console.log(`ya aya con input : ${this.state.thirdVal}`);
        console.log(`ya aya con input : ${this.state.fourthVal}`); // why not setting?

    }

}

所以我可以在控制台日志中看到该值是正确的，但在索引 === 3 上，该值未返回。

这是日志：

onChange with index 0 and val 1
capador 1
onChange with index 1 and val 2
capador 2
onChange with index 2 and val 3
capador 3
onChange with index 3 and val 4
capador 4
ya aya con input : 1
ya aya con input : 2
ya aya con input : 3
ya aya con input :

这就是 TextInputs 的样子：

                    <TextInput
                        ref="third"
                        style={this.state.pos > 1 ? styles.textInputStyle : styles.textInputNormalStyle}
                        keyboardType = "number-pad"
                        maxLength={1}
                        onKeyPress={(event) => {this.onChange(2, event.nativeEvent.key); }}
                    />

Answer 1

setState不会立即设置值，你必须等待状态更新。您可以检查状态更新时调用的 setState 回调中的值。考虑以下片段

this.setState({fourthVal : value}, () => {
    console.log(`ya aya con input : ${this.state.firstVal}`);
    console.log(`ya aya con input : ${this.state.secondVal}`);
    console.log(`ya aya con input : ${this.state.thirdVal}`);
    console.log(`ya aya con input : ${this.state.fourthVal}`);
});

希望对您有所帮助！

反应本机最后一个 textInput 框最后没有设置值 onChange

react native last textInput box not setting value at last onChange

javascript

textinput

react-native