React onClick 未在 PC 上的 IE 11、Safari 和 FF 上触发答案

【问题标题】：React onClick not firing on IE 11, Safari and FF on PCReact onClick 未在 PC 上的 IE 11、Safari 和 FF 上触发
【发布时间】：2017-01-27 17:31:10
【问题描述】：

我有以下组件：

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)}，我在控制台中也没有任何错误

我正在使用“react”：“^15.4.2”，我想知道问题是否与版本有关？

【问题讨论】：

我已经安装了 react 和 react-dom 15.0.0，它解决了 FF 问题并在 IE 上抛出了一个错误，说 promise is undefined
你需要一个promise polyfill。
我再次将版本更改为 15.2.0，现在错误已从 IE 消失，但点击不起作用

标签： javascript internet-explorer reactjs

【解决方案1】：

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

【讨论】：

【解决方案2】：

好的，所以问题不在于 onClick，而是 IE 11 不完全支持 axios。所以我的解决方案是：https://babeljs.io/docs/usage/polyfill/

【讨论】：