我正在尝试扩展一个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.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.btnLabel }
)
}
handleClick(){
this.setState({ inputType: this.state.inputType === 'password' ? 'text' : 'password' })
}
.....