通过事件反应改变输入类型

Question

我想要扩展一个React输入组件，它需要输入密码，并且在它旁边的元素或元素上的某个事件之后 - 它需要切换输入的类型（type = “文本/密码”）。

React如何处理？

我有这个作为类我的组件：

import { React, Component } from 'lib' 

export class PasswordInput extends Component { 
constructor(props, context){ 
    super(props, context) 
    const { type, validate, password } = this.props 

    if(context.onValidate && password) { 
     context.onValidate(password, validate) 
    } 

    if(context.showHide && password) { 
     context.onValidate(password, validate) 
    } 
} 

render() { 
    let inputType = 'password' 

    return (
     <div className="form"> 
      <label htmlFor="password">{ this.props.label }</label> 
      <input {...this.constructor.filterProps(this.props)} type={ inputType } /> 
      { this.props.touched && this.props.error && <div className="error">{ this.props.error }</div> } 
      <button onClick={ showHide() }>{ this.props.btnLabel }</button> 
     </div> 
    ) 
} 

showHide(field) { 
    return function(event){ 
     console.log(`state before is ${this.state}`) 
    } 
} 

// the meld is 
// export function meld(...objects) { 
//  return Object.assign({}, ...objects) 
// } 

    static filterProps(props) { 
     const result = meld(props) 
     delete(result.validate) 
     return result 
    } 
} 

PasswordInput.contextTypes = { 
    onValidate: React.PropTypes.func 
} 

编辑 我编辑的渲染方法，并补充说，处理事件的功能，但现在我越来越：

警告：setState（...）：在现有状态转换期间无法更新（例如在render内）。渲染方法应该是道具和状态的纯函数。

而我的浏览器崩溃。

.....

render() { 
    return (
     <div className="form__group"> 
      <label htmlFor="password">{ this.props.label }</label> 
      <input {...this.constructor.filterProps(this.props)} type={ this.state.inputType } /> 
      { this.props.touched && this.props.error && <div  className="form__message form__message_error">{ this.props.error }</div> } 
      <button onClick={ this.handleClick() }>{ this.props.btnLabel }</button> 
     </div> 
    ) 
} 

handleClick(){ 
    this.setState({ inputType: this.state.inputType === 'password' ? 'text' : 'password' }) 
} 

.....

Answer 1

您可以配置根据组件的状态输入的类型，并设置它的一些事件，例如：

<input {...this.constructor.filterProps(this.props)} type={ this.state.inputType } onChange={ event => this.onChange(event) } />

并实现onChange方法：

onChange(event) { 
    var length = event.currentTarget.value.length; 
    this.setState({ inputType: length < 5 ? 'text' : 'password' }); 
} 

您可能必须绑定onChange函数。