React JS 中使用 props 传入的正则表达式匹配错误。

我想实现一个 React 组件，功能是通过 props 传入正则表达式，然后在 onChange 事件中通过匹配正则表达式来判断输入是否合法。

当我直接将正则表达式传入时，会出现匹配错误的情况

var RegexTextField = React.createClass({
  handleChange: function (e) {
    var patt = this.props.regex;        // 这里直接获取正则表达式
    var val = e.target.value;
    console.log('----------');
    console.log('正则：' + patt + ' 输入值：' + val);
    console.log('匹配结果：' + patt.test(val));
  },
  render: function() {
    return (
        <input type="text" regex={this.props.regex} onChange={this.handleChange} />
    );
  }
});

React.render(
  <RegexTextField regex={/\d/g} />,        // 传入正则表达式
  document.getElementById('regex-text-field')
);

// 测试结果
正则：/\d/g 输入值：a1
匹配结果：true
----------
正则：/\d/g 输入值：a1a
匹配结果：false
----------
正则：/\d/g 输入值：a1aa
匹配结果：true
----------
正则：/\d/g 输入值：a1aaa
匹配结果：false

规律为数字在第几位第几次触发 onchange 事件才会成功

如果我通过传正则字符串再转换成正则对象就没有这个问题

var RegexTextField = React.createClass({
  handleChange: function (e) {
    var patt = RegExp(this.props.regex, 'g');        // 这里转换正则对象
    var val = e.target.value;
    console.log('----------');
    console.log('正则：' + patt + ' 输入值：' + val);
    console.log('匹配结果：' + patt.test(val));
  },
  render: function() {
    return (
        <input type="text" regex={this.props.regex} onChange={this.handleChange} />
    );
  }
});

React.render(
  <RegexTextField regex="[\d]" />,        // 传入正则字符串
  document.getElementById('regex-text-field')
);

// 测试结果
---------- Inline JSX script:203
正则：/[\d]/g 输入值：a
匹配结果：false
----------
正则：/[\d]/g 输入值：a1
匹配结果：true
----------
正则：/[\d]/g 输入值：a1a
匹配结果：true
----------
正则：/[\d]/g 输入值：a1aa
匹配结果：true 

请问是我哪里写的不正确导致这个现象吗？

---

哈哈，出现这么个问题不能怪别人，只能怪你手贱，开启了JavaScript正则的global模式。
你仔细比较你的两种写法，除了正则表达式不同外，最主要的不同就是，第一种
var patt = this.props.regex;始终指向同一个RegExp对象，
而第二种var patt = RegExp(this.props.regex, 'g');,则每次都会new一个新的RegExp对象。
二者有何不同呢？
----------------------偏知识分割线----------------------
在开启了global的情况下,RegExp对象会记录上次匹配的索引位置lastIndex，再次进行test的时候，会从上次匹配到的记录继续向下匹配。
----------------------偏知识分割线----------------------
所以，规律不是你发现的“数字在第几位第几次触发 onchange 事件才会成功”，而是val中以数字出现的次数为循环周期。具体情况，你可以在测试代码里加上

 var patt = this.props.regex;        // 这里直接获取正则表达式
    var val = e.target.value;
    console.log('----------');
    console.log('正则：' + patt + ' 输入值：' + val);
     console.log(patt.lastIndex);
    console.log('匹配结果：' + patt.test(val));

应该就可以看明白了，不怪你，也不怪React，这个知识点确实比较偏。看明白了，记得点赞哦，(*^__^*) 嘻嘻..