2017-01-27 5 views
0

にIE 11、SafariとFFで焼成しない反応させ:はonClickの私は、次の成分を有する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(本)}また、私はコンソールにエラーがありません

私は "反応"を使用しています: "^ 15.4.2"、私は問題がバージョンに関連する可能性がありますか?

+0

が反応し、反応-DOM 15.0.0およびそれがFFの問題を解決しました約束が定義されていないと言ってIEにエラーを投げた – Alex

+0

あなたは[** promise polyfill **](https://github.com/taylorhakes/promise-polyfill)が必要です。 – Tholle

+0

バージョンを15.2.0に変更しました。エラーはIEから削除されましたが、クリックは機能しません – Alex

答えて

0

問題は、だから私のソリューションは、このだったのonClickではなかったが、axiosで完全にIE 11ではサポートされていないので、[OK]:私がインストールされているhttps://babeljs.io/docs/usage/polyfill/

関連する問題