在React组件

Question

我有一个React输入组件，我想在每次模糊后使用HTML5约束验证来验证用户输入。

var TextField = React.createClass({

    handleValidation: function () {
        React.findDOMNode(this.refs.textField).checkValidity();
        //TODO listen on invalid event
    },

    render: function () {
        return (
            <input ref="textField" onBlur={this.handleValidation} />
        )
    }
});

Answer 1

有理由听这个事件吗？

“checkValidity（）方法，如果元素无法满足任何约束，则返回false，否则返回true。” MDN source

所以你可以检查这个函数是否返回false。

if (!React.findDOMNode(this.refs.textField).checkValidity()) {
  // not valid
}

Answer 2

您可以尝试在componentDidMount函数中放置一个事件监听器......可能是这样的吗？

componentDidMount: function() {
  React.findDOMNode(this.refs.textField).addEventListener("invalid", function () {
    //do something here
  });
},

请记住，如果您导航到另一个组件，则应首先删除事件侦听器。希望这会有所帮助。