javascript - 在 React 组件上监听 'invalid' 事件

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
}