通过本机反应传递复选框值以显示/隐藏密码
Posted
技术标签:
【中文标题】通过本机反应传递复选框值以显示/隐藏密码【英文标题】：Passing checkbox value to show / hide Password via react native 【发布时间】：2017-11-21 12:56:12 【问题描述】：我正在使用 Firebase 身份验证，我想添加一个复选框，它将在密码文本框中显示密码并在再次单击时隐藏它
如何传递复选框值以显示/隐藏密码？
这是我的登录页面代码：
export default class Login extends Component
constructor(props)
super(props)
this.state =
email: '',
password: '',
response: ''
this.signUp = this.signUp.bind(this)
this.login = this.login.bind(this)
async signUp()
try
await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
this.setState(
response: 'Account Created!'
)
setTimeout(() =>
this.props.navigator.push(
id: 'App'
)
, 500)
catch (error)
this.setState(
response: error.toString()
)
async login()
try
await firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
this.setState(
response: 'user login in'
)
setTimeout(() =>
this.props.navigator.push(
id: 'App'
)
)
catch (error)
this.setState(
response: error.toString()
)
render()
return (
<View style=styles.container>
<View style=styles.containerInputes>
<TextInput
placeholderTextColor="gray"
placeholder="Email"
style=styles.inputText
onChangeText=(email) => this.setState( email )
/>
<TextInput
placeholderTextColor="gray"
placeholder="Password"
style=styles.inputText
password=true
secureTextEntry=true
onChangeText=(password) => this.setState( password )
/>
</View>
<TouchableHighlight
onPress=this.login
style=[styles.loginButton, styles.button]
>
<Text
style=styles.textButton
>Login</Text>
</TouchableHighlight>
<TouchableHighlight
onPress=this.signUp
style=[styles.loginButton, styles.button]
>
<Text
style=styles.textButton
>Signup</Text>
</TouchableHighlight>
</View>
)
【问题讨论】：
【参考方案1】：import React, useState from 'react';
import TextInput from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
const [hidePass, setHidePass] = useState(true);
<TextInput
placeholder="Old password"
autoCompleteType="password"
secureTextEntry=hidePass ? true : false
/>
<Icon
name=hidePass ? 'eye-slash' : 'eye'
size=15
color="grey"
onPress=() => setHidePass(!hidePass)
/>
【讨论】：
【参考方案2】：这样做的一种方法是设置一个像 showPassword 这样的状态变量，并在选中复选框时切换它。像这样：
import React, Component from 'react';
import
AppRegistry,
Text,
View,
TextInput,
Switch
from 'react-native';
export default class DemoProject extends Component
constructor(props)
super(props);
this.toggleSwitch = this.toggleSwitch.bind(this);
this.state =
showPassword: true,
toggleSwitch()
this.setState( showPassword: !this.state.showPassword );
render()
return (
<View>
<TextInput
placeholderTextColor="gray"
placeholder="Password"
secureTextEntry=this.state.showPassword
onChangeText=(password) => this.setState( password )
/>
<Switch
onValueChange=this.toggleSwitch
value=!this.state.showPassword
/>
<Text>Show</Text>
</View>
)
AppRegistry.registerComponent('DemoProject', () => DemoProject);
注意：如果您设置了密码属性，这将不起作用！！！
所以只需使用常规的 TextInput 并使用 secureTextEntry 属性。
【讨论】：
我还有一个类似的问题，你能帮帮我吗？谢谢。(***.com/questions/44640952/…) 谢谢！当我将切换功能传递给组件的 onPress 属性（或本例中的 onValueChange）时，我的问题是没有绑定我的切换功能。【参考方案3】：这是我的做法
const LoginScreen = props =>
const [icon, setIcon] = useState("eye-off")
const [hidePassword, setHidePassword] = useState(true)
_changeIcon = () =>
icon !== "eye-off"
? (setIcon("eye-off"), setHidePassword(false))
: (setIcon("eye"), setHidePassword(true))
我使用原生库作为 textInput
<Input
secureTextEntry=hidePassword
placeholder="Password"
placeholderTextColor=palette.gray
/>
<Icon name=icon size=20 onPress=() => _changeIcon() />
这将改变点击时的secureTextEntry
【讨论】：
还有其他答案提供了 OP 的问题，它们是前一段时间发布的。在发布see: How do I write a good answer? 的答案时，请确保添加新的解决方案或更好的解释，尤其是在回答较老的问题时。【参考方案4】：如果我错了，请纠正我，你是在问如何创建一个复选框？如果是这样，您有两条路线，要么使用网络上众多复选框之一中的第 3 方库，要么您可以自己创建一个。
步骤：
-
下载像https://github.com/oblador/react-native-vector-icons这样的图标库，这样您就可以使用enter link description here中的两个材料设计图标，例如。复选框空白轮廓和复选框标记以模拟单击和未单击
使用这两个新图标，只需创建一个具有您想要的任何功能的新组件，并以您想要的方式处理所有状态。
基本实现：
-
有一个状态来控制它是否被选中
有一个 onPress 函数来处理这两种状态并触发各自的道具
// the on press function
onPress = () =>
if (this.sate.checked)
this.props.checked();
else
this.props.unChecked();
// the rendered component
<Icon name=this.state.checked ? "checkbox-marked" : "checkbox-blank-outline" onPress=this.onPress/>
【讨论】：
【参考方案5】：这就是我简单的做法，
我的复选框和密码组件，
<input style= inputUname type=this.state.type placeholder="Password" value= this.state.password onChange=this.handlePassword/>
<Checkbox defaultChecked=false onSelection=this.showPassword value="false" name="Checkbox" label="Show password"/>
我的状态，
this.state =
type: 'input'
这是我的显示密码事件，
showPassword(e)
this.setState( showpassword: !this.state.showpassword ) // this is to change checkbox state
this.setState( type: this.state.type === 'password' ? 'text' : 'password' ) // this is to change input box type text/password change
【讨论】：
谢谢，你能帮我解决这个问题吗：(***.com/questions/44640952/…)【参考方案6】：Step1：创建一个useState钩子来存储password和secureTextEntry的初始值：
const [data, setData] = useState(
password: '',
isSecureTextEntry: true,
);
Step2：根据条件更新状态：
<View>
<TextInput
style=styles.textInput
placeholder="Enter Password"
secureTextEntry=data.isSecureTextEntry ? true : false
onChangeText=data =>
setData(
password: data,
//OR
/*
//Array destructuring operator to get the existing state i.e
...data
*/
//and then assign the changes
isSecureTextEntry: !data.isSecureTextEntry,
);
></TextInput>
<TouchableOpacity
onPress=() =>
setData(
//...data,
isSecureTextEntry: !data.isSecureTextEntry,
);
>
<FontAwesome
name=data.isSecureTextEntry ? 'eye-slash' : 'eye'
color="gray"
size=25
paddingHorizontal="12%"
/>
</TouchableOpacity>
</View>
【讨论】：
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。以上是关于通过本机反应传递复选框值以显示/隐藏密码的主要内容，如果未能解决你的问题，请参考以下文章
反应本机secureTextEntry在android上不起作用