Question

我有以下组件：

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

我正在使用＆＃34;反应＆＃34;：＆＃34; ^ 15.4.2＆＃34;，我想知道这个问题是否与版本有关？

Answer 1

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

Answer 2

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

React onClick不会在PC上的IE 11，Safari和FF上触发

2 个答案: