Question

当用户单击新密码的眼睛图标时，用户只能切换（显示或隐藏）新密码字段的视图。问题是它在切换新密码和确认密码的视图。如何仅在两个字段之间切换眼睛图标视图？

export default class ResetPassword extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      secure: true,
      newPassword: '',
      confirmPassword: ''
    }
  }


  togglePassword = () => {
    this.setState(prevState => ({ secure: !prevState.secure }))
  }

  render() {
    return (
      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
        <CommonBackground
          heading='Reset' />
        <Field
          label='New password'
          placeholder='Enter new password'
          secure={this.state.secure}
          icon
          onChangeText={newPassword => this.setState({ newPassword })}
          value={this.state.newPassword}
          action={this.togglePassword} />
        <Field
          label='Confirm password'
          placeholder='Enter password again'
          secure={this.state.secure}
          icon
          onChangeText={confirmPassword => this.setState({ confirmPassword })}
          value={this.state.confirmPassword}
          action={this.togglePassword} />
        
      </ScrollView>
    );
  }
}
ResetPassword.navigationOptions = {
  header: null
}

export const Field = ({
  label,
  placeholder,
  onChangeText,
  secure,
  icon,
  value,
  action
}) => (
  <View style={styles.fieldWrapper}>
    <Text style={styles.heading}>{label}</Text>
    <View style={styles.iconWrapper}>
      <TextInput
        secureTextEntry={secure}
        style={styles.input}
        onChangeText={onChangeText}
        placeholder={placeholder}
        value={value} />
      {icon ? (
        <TouchableOpacity
          onPress={action}
          underlayColor='transparent'>
          {!secure ? <EyeView height={30} width={30} /> : <EyeHide height={30} width={30} />}
        </TouchableOpacity>
      ) : null}
    </View>
  </View>
)

Answer 1

您似乎在两个字段中都使用了相同的状态变量“安全”。因此，切换一个字段会同时影响两者。

使用不同的状态字段输入密码和ConfirmPassword，

this.state = {
  // Other fields can be the same.
  passwordSecure: true,
  confirmPasswordSecure: true
}

每个都有2个单独的切换处理程序，

togglePassword = () => {
    this.setState(prevState => ({ passwordSecure: !prevState.passwordSecure }))
  }

toggleConfirmPassword = () => {
  this.setState(prevState => ({ confirmPasswordSecure: !prevState.confirmPasswordSecure})
}

或者，使用单个切换处理程序，并使用事件对象来确定要单击的字段。

Answer 2

希望这会有所帮助：

我已经更新了答案，可以在两个输入的共同字段中使用

：

class App extends React.Component{

  constructor(props){
  
    super(props);
    
      this.state = {
        secure: true,
        showConfirmPwd: false,
        showPwd: false
      }
      
      this.handleItemClick = this.handleItemClick.bind(this) 
  }

  
  handleItemClick(name){
 
    switch(name){
    
      case 'pwd':
      this.setState({showPwd: !this.state.showPwd});
      break;

      case 'confirmPwd':
      this.setState({showConfirmPwd: !this.state.showConfirmPwd});
      break;

      default:
      return;
      
     }
  }

  render(){
    
    let { secure, showConfirmPwd, showPwd } = this.state;

    return(
    
      <div>      
        <Field handleItemClick={this.handleItemClick} showPwd={showPwd} switchKey="pwd" placeholder="password" />
        <Field handleItemClick={this.handleItemClick} switchKey="confirmPwd" showConfirmPwd={showConfirmPwd} placeholder="confirm password" />
     </div>
     
    )
  }
}

const Field = ({ showPwd, showConfirmPwd, placeholder, handleItemClick, switchKey }) => {
  return(
  
    <div>
      
      <input type={(showConfirmPwd || showPwd)? "text": "password" } placeholder={placeholder} />
      <span onClick={() => handleItemClick(switchKey)}> eye </span>
      
    </div>
  
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Answer 3

  constructor(props) {
    super(props)
    this.state = {
      passwordSecure: true,
      confirmPasswordSecure: true,
      newPassword: '',
      confirmPassword: ''
    }
  }

  
  togglePassword = (secure) => {
    this.setState(prevState => ({ [secure]: !prevState[secure] }))
  }

  render(){
   
    return(
    
      <div>      
        <Field
          label='New password'
          placeholder='Enter new password'
          secure={this.state.passwordSecure}
          icon
          onChangeText={newPassword => this.setState({ newPassword })}
          value={this.state.newPassword}
          action={() => this.togglePassword('passwordSecure')}
          type='newPassword' />
        <Field
          label='Confirm password'
          placeholder='Enter password again'
          type='newPassword'
          secure={this.state.confirmPasswordSecure}
          icon
          onChangeText={confirmPassword => this.setState({ confirmPassword })}
          value={this.state.confirmPassword}
          action={() => this.togglePassword('confirmPasswordSecure')} />
     </div>
     
    )
  }
}

export const Field = ({
  label,
  placeholder,
  onChangeText,
  secure,
  type,
  icon,
  value,
  action
}) => (
  <View style={styles.fieldWrapper}>
    <Text style={styles.heading}>{label}</Text>
    <View style={styles.iconWrapper}>
      <TextInput
        secureTextEntry={secure}
        style={styles.input}
        onChangeText={onChangeText}
        placeholder={placeholder}
        textContentType={type}
        value={value} />
      {icon ? (
        <TouchableOpacity
          onPress={action}
          underlayColor='transparent'>
          {!secure ? <EyeHide height={30} width={30} /> : <EyeView height={30} width={30} />}
        </TouchableOpacity>
      ) : null}
    </View>
  </View>
)

如何设置特定元素的prevState？

3 个答案: