React.js驗證

Question

所以我有一個我試圖在React.js中驗證的表單，如下所示：

({
render: function() {
    return React.DOM.form({
      className: 'form-inline',
      onSubmit: this.handleSubmit
    },React.DOM.div({
        className: 'form-group'
     }, React.DOM.input({
          type: 'text',
          className: 'form-control',
          placeholder: 'Name (CN)',
          name: 'team_name',
          value: this.state.team_name,
          onChange: this.handleChange
          })));
    }
});

因此，名稱必須是中文，如上面的表格中提示的那樣，為了驗證我在帖子之前放置了一個方法，有點像

if (chinese.test(this.state.team_name)) {
   $.post ...;
} else {
   console.log("Chinese language error");
}

chinese是chinese的正則表達式。

我的問題是提交失敗，如何使用Bootstrap呈現警報或通知，告訴用戶表單存在問題？

我知道按下提交后，組件會被重新渲染，所以我嘗試設置狀態變量並將其渲染為：

if (chinese.test(this.state.team_name)) {
   $.post ...;
} else {
   console.log("Chinese language error");
   this.setState({error: true});
}

然后...

({
render: function() {
    if (this.state.error) {
        React.DOM.div;
    }
    return React.DOM.form({
      className: 'form-inline',
      onSubmit: this.handleSubmit
    },React.DOM.div({
        className: 'form-group'
     }, React.DOM.input({
          type: 'text',
          className: 'form-control',
          placeholder: 'Name (CN)',
          name: 'team_name',
          value: this.state.team_name,
          onChange: this.handleChange
          })));
    }
});

那沒用。 那么使用React.js的方式是什么，我可以通過驗證過程使用Bootstrap HTML呈現通知或錯誤？

謝謝！

Answer 1

所以我設法使用localStorage解決了這個問題

在使用正則表達式調用驗證后，如果它沒有通過，我將使用localStorage.setItem('token', 'message)存儲錯誤消息

之后在呈現表單的組件中，我使用localStorage.getItem('token')調用了消息

對於所有情況而言，這不是最優雅的解決方案，但它很適合我，因為我每次都會在設置新消息之前清除localStorage 。