Question

有时我真的很困惑，我什么时候需要将.bind(this)附加到方法（ES5）或使用箭头功能（ES6） e.g。

    handleSubmit(e) {
        console.log(this)
    }

    handleChange(e) {
        console.log(this)
    }

    render() {
        return (
            <div className="col-sm-4">
                <form onChange={e => this.handleChange(e)} onSubmit={e => this.handleSubmit(e)}>
                    <input type="text" name="user" placeholder="user"/>
                    <input type="text" name="comment" placeholder="comments"/>
                    <input type="submit" hidden/>
                </form>
            </div>
        )
    }

因此，如果我想访问this和handleChange内的handleSubmit，那么我必须使用onChange和onSubmit的箭头功能，否则{ {1}}和onChange可以更改为：

onSubmit

我是对的吗？感谢

Answer 1

是的，每次将自定义函数传递给.bind或onChange等事件处理程序时，您都需要onSubmit。

这是由React.createClass（）与扩展React.Component中的this上下文差异引起的。

使用React.createClass（）将自动正确绑定此上下文（值），但使用ES6类时则不然。在使用ES6方式（通过扩展React.Component）时，默认情况下此上下文为null。该类的属性不会自动绑定到React类（组件）实例。

顺便说一句.bind不是唯一可用的选项。有关我所知道的所有方法的摘要，请参阅my answer here。

PS：实际上，这不是Redux特有的东西 - 与Redux的工作原理无关。这是与ReactJS相关的纯粹行为。

Answer 2

是的，你是对的，当然如果你的意思是<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="selector">Click me</button>是你班级的背景。在我看来，在这些情况下使用this更清楚，但我不知道这是否更有效。

Answer 3

在您的示例中，您可以使用箭头功能并按照您的说明制作表单。

另一个选项是拥有一个绑定的构造函数。

constructor() {
  super();
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

那么你的表格就是 <form onChange={this.handleChange} onSubmit={this.handleSubmit}>

Answer 4

将函数绑定到正确的上下文有多种方法。

当您想要使用函数或属性时，您是对的那么你需要在React类的上下文中定义绑定你的功能。

绑定函数的另一种方法是在构造函数中指定绑定

像

constructor(){
  super();
  this.handleSubmit = this.handleSubmit.bind(this);
  this.handleChange = this.handlechange.bind(this);

}

＆＃13;

class App extends React.Component {
constructor(){
    super();
    this.state = {
       val: 'abc'
     }
    
}
handleSubmit(e) {
        console.log(this.state.val)
    }

    handleChange(e) {
        console.log(this.state.val)
    }

    render() {
        return (
            <div className="col-sm-4">
                <form onChange={e => this.handleChange(e)} onSubmit={e => this.handleSubmit(e)}>
                    <input type="text" name="user" placeholder="user"/>
                    <input type="text" name="comment" placeholder="comments"/>
                    <input type="submit" hidden/>
                </form>
            </div>
        )
    }
    
    }
    
    ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

在Redux中，何时需要使用.bind（this）

4 个答案: