React.js 验证

Posted 2023-03-05

【中文标题】React.js 验证

【英文标题】：React.js Validation

【发布时间】：2016-11-05 16:57:22

【问题描述】：

所以我有一个我想在 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 是中文字符的正则表达式。

我的问题是提交失败后，如何使用 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 呈现通知或错误？

谢谢！

【问题讨论】：

嗨。如果您想更快更好地获得反馈，请尝试在您的问题中仅使用 javascript，而不是咖啡。据我所知，使用coffeescript 的反应用户并不多。

【参考方案1】：

所以我设法使用localStorage解决了这个问题

使用正则表达式调用验证后，如果未通过，我将使用 localStorage.setItem('token', 'message) 存储错误消息

之后在呈现表单的组件中，我使用localStorage.getItem('token') 调用了消息

不是所有情况下最优雅的解决方案，但它非常适合我，因为我会在每次设置新消息之前清除 localStorage。