Javascript 通过事件响应更改输入类型

我正在尝试扩展React输入组件，它需要输入password类型，并且在元素或其旁边的元素上发生特定事件之后-它需要切换输入类型（type=“text/password”）

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
}

---

..…

您可以根据组件的状态配置输入的类型，并在某些事件上进行设置，例如：

this.onChange（event）}/>

并实现

onChange

方法：

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

onChange（事件）{
变量长度=event.currentTarget.value.length；
this.setState（{inputType:length<5？'text'：'password'}）；
}

---

您可能需要绑定

onChange

函数。

谢谢。不幸的是，它给了我TypeError:this.state为null我忘记了声明状态-this.state={inputType:'password'}-我的badI也有相同的错误，但我得到了错误

一个组件正在更改密码类型的非受控输入以进行控制。输入元件不应从非受控切换到受控（反之亦然）。决定在组件的使用寿命内使用受控或非受控输入元件。

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