React onClick无法在PC上的IE 11，Safari和FF上触发 [英] React onClick not firing on IE 11, Safari and FF on PC

问题描述

我具有以下组成部分:

class FirstName extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            submitted: false,
            firstNameError: false
        };

        this.setFirstNameErrorOn = this.setFirstNameErrorOn.bind(this);
    }

    setFirstNameErrorOn (v) {
        this.setState({ firstNameError: v })
    }
    getName () {
        var name = this.refs.firstName.value;
        this.setState(function() {
            this.props.action(name);
        });
        if(name.slice(-1) != 's') {
            this.props.setHideS(false);
        }
    }
    goNext () {
        this.setState({ submitted: true }, function() {
            this.props.actionID(2);
            this.props.activeNav('case-1');
            this.props.setNavA(true);
            this.setFirstNameErrorOn(false);
        }); 
    }
    handleSubmit (e) {
        e.preventDefault();
        window.scrollTo(0, 0);
        if(this.props.currentState.name.slice(-1) === 's'){
            this.props.setHideS(true);
            var url = '/validate-name/' + this.props.name;
            axios.get(url)
                .then(res => {
                    if(res.status == 200){
                        this.goNext();
                    }
                },
                (error) => { 
                    this.setFirstNameErrorOn(true);
                }
            );
        }

        else if(this.props.currentState.name != '') {
            this.props.setHideS(false);
            var url = '/validate-name/' + this.props.name;
            axios.get(url)
                .then(res => {
                    if(res.status == 200){
                        this.goNext();
                    }
                },
                (error) => { 
                    this.setFirstNameErrorOn(true);
                }
            );
        }
        else {
            this.props.setHideS(false);
        }
    }
    componentDidMount(){
        this.refs.firstName.focus();
    }
    getActiveForm () {
        if (this.props.show === 1) {
            return "show-form";
        }
        else {
            return "";
        }   
    }
    render () {
        var activeForm = this.getActiveForm(this.props.show);
        return (
            <div className={"form " + activeForm + " first-name"}>
                <h2>tell us your<br /> first name</h2>
                <form>
                    <input 
                        type="text"
                        ref="firstName"
                        onChange={this.getName.bind(this)}
                        placeholder="First Name"
                        maxLength="10"
                        className={this.state.firstNameError ? 'invalid': ''}
                    />
                    <span>Oops! Try again!</span>
                    <div className="buttons-wrapper">
                        <a href="/" className="back">
                            <span>
                                back
                            </span>
                        </a>
                        <button className="next" onClick={this.handleSubmit.bind(this)}>
                            <span>
                                continue
                            </span>
                        </button>
                    </div>
                </form>
            </div>  
        );
    }
};

onClcik根本不会触发:onClick = {this.handleSubmit.bind(this)}，而且控制台中也没有任何错误

the onClcik doesn't fire at all: onClick={this.handleSubmit.bind(this)}, also I don't have any errors in the console

我正在使用"react":"^ 15.4.2"，我想知道问题是否可能与版本有关?

I am using "react": "^15.4.2", I was wondering if the issue could be version related?

推荐答案

如果在模糊效果后使用onClick()清理元素，请尝试删除onBlur()！

try to remove onBlur() if you clean elements with onClick()after blur effect !

这篇关于React onClick无法在PC上的IE 11，Safari和FF上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！