Question

我试图播放显示here的示例代码，以便有一个覆盖触发器，在我的表单组件的无效用户名字段正则表达式上显示一个弹出窗口。我在尝试执行此代码时遇到了经典的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>
    );
  }
});

对此的任何帮助都非常感谢，一如既往。谢谢。

Answer 1

如果我正在开发这个，我会采用不同的方式，Input管理它自己的验证，并通过其状态公开它是否有效（可通过{{1}访问}）。

如果不改变您的方法，这应该会更好，因为它不会触发父组件状态的更改，直到显示或隐藏叠加层：

refs

具有表单字段验证的React-Bootstrap Popover

1 个答案: