反应本机最后一个文本输入框最后没有设置值 onChange

Posted 2023-04-18

【中文标题】反应本机最后一个文本输入框最后没有设置值 onChange

【英文标题】：react native last textInput box not setting value at last onChange

【发布时间】：2018-09-18 08:12:23

【问题描述】：

我有一组 4 人

文本输入

前三个在 '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); 
                    />

【参考方案1】：

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

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`);
);

希望这会有所帮助！