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

我正在尝试扩展一个React输入组件,它需要是类型密码,并且在它旁边的元素或元素上的某个事件之后 - 它需要切换输入的类型(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 (

{ this.props.label }

{ this.props.touched && this.props.error &&

{ this.props.error }
}

{ this.props.btnLabel }

)

}

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

}

EDIT 我've edited the render method and added a function that handles the event, but I'我现在得到:

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

我的浏览器崩溃了 .

.....

render() {

return (

{ this.props.label }

{ this.props.touched && this.props.error &&

{ this.props.error }
}

{ this.props.btnLabel }

)

}

handleClick(){

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

}

.....

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值