gpt4 book ai didi

javascript - 更改焦点上 react native 文本输入的状态

转载 作者:行者123 更新时间:2023-12-01 01:30:52 24 4
gpt4 key购买 nike

我试图让我的占位符文本在 React Native TextInput 组件中的焦点上消失。该函数正在被调用,状态正在发生变化,但占位符仍然存在。这是组件代码:

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export class GeneralInput extends React.Component {

constructor(props) {
super(props);
this.state = {
placeholder: this.props.placeholder
};
}
whenInputIsFocused() {
console.log('Before changing the state');
this.state.placeholder = "";
console.log('After changing the state');
console.log(this.state);
}
render() {
console.log(this.state);
return(
<View style={styles.outerContainer}>
<Text style={styles.labelText}>{this.props.labelText}</Text>
<TextInput autoCapitalize='none' secureTextEntry={this.props.secureTextEntry} onFocus={this.whenInputIsFocused.bind(this)} underlineColorAndroid="transparent" keyboardType={this.props.type} returnKeyType={this.props.returnKeyType} placeholder={this.state.placeholder} placeholderTextColor='rgba(255, 255, 255, 0.3)' style={styles.inputStyles} />
</View>
);
}
}

这是控制台日志输出:

[09:39:18] Before changing the state
[09:39:18] After changing the state
[09:39:18] Object {
[09:39:18] "placeholder": "",
[09:39:18] }

为什么我的 TextInput 占位符没有消失,即使正在调用该函数并且状态已更新?

最佳答案

这是正常行为。如果您输入文本,占位符将会消失,但您缺少两个重要的属性。

<TextInput>
onChangeText={(text) => this.setState({text})}
value={this.state.text}
</TextInput>

value 设置文本(不是占位符)并将其保留在 TextInput 中。onChangeText 通过设置 State 来更改文本。启动时 this.state.text 应包含空字符串 ""

编辑:如果想让占位符消失,需要通过

设置

this.setState({placeholder: ""});

使用 this.setState() 将强制重新渲染。

关于javascript - 更改焦点上 react native 文本输入的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53285832/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com