我试图播放此处显示的示例代码,以便有一个覆盖触发器,该触发器在我的表单组件的无效用户名字段正则表达式上显示一个弹出窗口。Cannot update during an existing state transition (such as within "render"). Render methods should be a pure function of props and state.
尝试执行此代码时出现经典错误:
var UserField = React.createClass({
getInitialState: function() {
return {
value: ''
};
},
getValue: function() {
return this.refs.input.getValue();
},
validationState: function() {
let valueCode = this.state.value;
if (valueCode.length > 0) {
switch (valueCode.match(/^[A-Za-z0-9_-]+$/)) {
case null:
this.refs.userHint.show();
return 'warning';
break;
default:
this.refs.userHint.hide();
return '';
break;
}
}
},
handleChange: function() {
this.setState({
value: this.refs.input.getValue()
});
},
render: function() {
return (
<OverlayTrigger
ref="userHint"
trigger="manual"
placement="right"
overlay={<Popover title='Invalid Username Format'>
<strong>Warning!</strong> Valid user credentials only contain alphanumeric characters, as well as heifens and underscores.
</Popover>
}
>
<Input
type = 'text'
value = {this.state.value}
label = 'Username'
bsStyle = {this.validationState()}
ref = 'input'
groupClassName = 'input-group'
className = 'form-control'
onChange = {this.handleChange}
/>
</OverlayTrigger>
);
}
});
一如既往,非常感谢您对此的任何帮助。谢谢你。