侦听 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源

你可以检查这个函数是否返回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
  });
},

请记住，如果导航到另一个组件，您应该首先删除事件侦听器。