Javascript React引导式Popover与表单字段验证

我试图对显示的示例代码进行重演，以便有一个覆盖触发器，在表单组件的无效用户名字段regex上显示一个popover。我发现经典的

无法在现有状态转换期间更新（例如在“render”中）。渲染方法应该是道具和状态的纯函数。

尝试执行此代码时出错：

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>
    );
  }
});

var UserField=React.createClass({
getInitialState:函数（）{
返回{
值：“”
};
},
getValue:function（）{
返回此.refs.input.getValue（）；
},
validationState:函数（）{
让valueCode=this.state.value；
如果（valueCode.length>0）{
开关（valueCode.match（/^[A-Za-z0-9_-]+$/）{
大小写为空：
this.refs.userHint.show（）；
返回“警告”；
打破
违约：
this.refs.userHint.hide（）；
返回“”；
打破
}
}
},
handleChange:function（）{
这是我的国家({
值：this.refs.input.getValue（）
});
},
render:function（）{
返回(
);
}
});

---

一如既往，我们非常感谢您在这方面的任何帮助。谢谢。

如果我正在开发这个，我会以不同的方式来做，使用

输入管理它自己的验证，并通过它的状态公开它是否有效（通过
参考
可以访问）

在不改变方法的情况下，这应该会更好，因为在显示或隐藏覆盖之前，它不会触发父组件状态的更改：

validationState: function() {
  let valueCode = this.state.value;
  if (valueCode.length > 0) {
    switch (valueCode.match(/^[A-Za-z0-9_-]+$/)) {
      case null:
        return 'warning';
        break;

      default:
        return '';
        break;
    }
  }
},

handleChange: function() {
  let valueCode = this.refs.input.getValue();

  if (valueCode.length > 0) {
    switch (valueCode.match(/^[A-Za-z0-9_-]+$/)) {
      case null:
        this.refs.userHint.show();
        break;

      default:
        this.refs.userHint.hide();
        break;
    }
  }
  this.setState({
    value: valueCode
  });
},