如何在反应类Es6中的另一个方法中调用方法 [英] How do i call a method within another method in react class Es6

问题描述

所以我基本上要做的就是简单

So what i'm basically trying to do is simple

class Something extends React.Component {

validateEmail () {
//code that validates email,innerHTML a div.status element if error occurs
this.removeStatus();//then remove status onkeydown of input element
 }

removeStatus () {
//code that removes the status onkeydown of input element

 }
}

出于某种原因，它不起作用。在我的javascript控制台（chrome）
我得到这个

for some reason it's not working. in my javascript console (chrome) i'm getting this

login.js:132Uncaught TypeError: this.removeStatus is not a function

编辑1：我添加了实际代码，因为你可以看到我' m绑定构造函数中的validateEmail

Edit 1: I've added the actual code, as you can see i'm binding validateEmail in the constructor

class Email extends React.Component {
constructor(props) {
      super(props);
      this.change = this.change.bind(this);
      this.validateEmail = this.validateEmail.bind(this);
      this.state = {
        value : ''
      }
    }
removeStatus() {
$('input').on('keydown',function () {
    $('.contextual-info').fadeOut();
});
}

 validateEmail(event) {
event.preventDefault();
var token = $('#token').val();
var email_regex=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if ($.trim(this.state.value)  !== "") {
    if (email_regex.test(this.state.value)) {
        $.ajax({
            url:'/login',
            type:'post',
            data:{email:this.state.value,_token:token},
            success: function (response) {
            if (response) {
                $('#email').remove();
                $('.btn').remove();
                $('#status').html('');
                ReactDOM.render(<Password /> ,document.getElementById('login-dialogue'));
                $('input[type="password"]').focus();
                }  else {
                $('input#email').addClass('input-context');
                if($('#status').html('<div class="bg-danger contextual-info wrong">Email Address Not Found!</p>')){
                    this.removeStatus();
                    }
                }
            }
        });
    } else {
    if($('#status').html('<div class="bg-danger contextual-info wrong">Invalid Email Address</div>')){
        this.removeStatus();
    }
    }
} else {
    if($('#status').html('<div class="bg-danger contextual-info wrong">Can\'t submit an empty field!</div>')){
        this.removeStatus();
    }
}
}
change (event) {
this.setState({
    value : event.target.value
    });
}

render(){
    return(
        <div className="login-dialogue" id="login-dialogue">
        <h1 className="text-center">Log in</h1>
        <div id="status"></div>
        <form action="" onSubmit={this.validateEmail} id="validateEmail">
        <input type="email" id="email" value={this.state.value} placeholder="Email Address" onChange={this.change} />
        <button type="submit" className="btn btn-flat btn-wide teal white-text">Continue</button>
        </form>
        </div>
        );
}

}
 ReactDOM.render(<Email /> ,document.getElementById('flex-me'));

推荐答案

您的方法定义正确，所以问题出在你如何调用 validateEmail 。

Your methods are defined properly, so the problem is in how you call validateEmail.

你以一种集合的方式调用它此到您的 Something 实例以外的其他内容。这在事件监听器中很常见。我猜你在渲染中有这样的代码：

You're invoking it in a way that sets this to something other than your Something instance. This is common in event listeners. I guess you have some code like this in your render:

<button onClick={this.validateEmail} /> 

推荐的解决方案是绑定构造函数中的事件处理程序：

The recommended solution for React is to bind event handlers in your constructor:

class Something extends React.Component {

  constructor() {
    super();
    this.validateEmail = this.validateEmail.bind(this);
  }

  // ...
}

您也可以从箭头函数内部调用该方法，该函数在声明的位置保留此的值：

You could also call the method from inside an arrow function, which preserves the value of this at the place it was declared:

<button onClick={() => this.validateEmail()} /> 

这种方法的缺点是新的 onClick 每次渲染组件时都会创建处理程序。

The disadvantage of this approach is that a new onClick handler is created each time your component is rendered.

编辑：同样的问题，不同的地方。你在函数中调用 removeStatus ，这会丢失外部这个绑定。请改用箭头功能：

EDIT: same problem, different place. You call removeStatus inside a function, which loses the outer this binding. Use an arrow function instead:

$.ajax({
  success: (response) => { 
    // etc
    this.removeStatus();
  }
})

---

进一步阅读：

---

Further reading:

• 此在MDN上


• React可重用组件文档

• this on MDN
• React "reusable components" docs

这篇关于如何在反应类Es6中的另一个方法中调用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！