Reactjs 拥有.bind（）的目的

我不明白为什么在react应用程序中使用.bind（）操作。我注意到大多数开发人员在他们的代码中都使用它，而且如果没有这个操作，我也会出错。添加bind（）操作后，成功编译代码。但是我不知道为什么要使用它，也不知道.bind（）操作做了什么

//App.js

 import React, { Component } from 'react';
    import logo from './resources/metro-library-3.jpg';
    import './App.css';
    import Table from './components/bookTable.js';
    import Footer from './components/footer.js';
    import Header from './components/header.js';

    class App extends Component {

        constructor(props){
            super(props); 
            this.setSelectedAuthor = this.setSelectedAuthor.bind(this);
            this.updateFooter = this.updateFooter.bind(this);

            this.state = {
                authors: [],
                selectedAuthor: "select author",
                footerBook: {
                    name: "",
                    author: ""
                }
            }

        }

        setSelectedAuthor(author){
            this.setState({
                selectedAuthor: author
            }, () =>{
                this.setState({selectedAuthor: author});
                console.log(this.state.selectedAuthor);
            })
             console.log(author);

        }

        updateFooter(book){
            this.setState({
                footerBook: book
            })
    }


    componentDidMount(){
        let url = 'http://localhost:8083/getAll';
        let auth = [];
        fetch(url).then(response => response.json()).then((data) => {
            data.bdata.map((book) =>{
                auth.push(book.author)
            })
            this.setState({
                authors: auth
            })
        })
    }
     render() {
    return (
      <div className="App">
          <select value={this.state.selectedAuthor} onChange={(e) => this.setSelectedAuthor(e.target.value)}>
              <option value="select author">Select Author</option>
              {
                  this.state.authors.map((author, key) =>
                      <option key={key} value={author}>{author}</option>
                  )
              }
          </select>
          <Table filterBook = {this.state.selectedAuthor} update = {this.updateFooter}/>
          <Footer book={this.state.footerBook}/>

      </div>
    );
     }
    }

    export default App;

import React，{Component}来自'React'；
从“/resources/metro-library-3.jpg”导入徽标；
导入“/App.css”；
从“./components/bookTable.js”导入表；
从“./components/Footer.js”导入页脚；
从“./components/Header.js”导入标题；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.setSelectedAuthor=this.setSelectedAuthor.bind（this）；
this.updateFooter=this.updateFooter.bind（this）；
此.state={
作者：[]，
selectedAuthor：“选择作者”，
页脚簿：{
姓名：“，
作者：“
}
}
}
setSelectedAuthor（作者）{
这是我的国家({
所选作者：作者
}, () =>{
this.setState（{selectedAuthor:author}）；
console.log（this.state.selectedAuthor）；
})
console.log（作者）；
}
updateFooter（书籍）{
这是我的国家({
书
})
}
componentDidMount（）{
让url为空http://localhost:8083/getAll';
设auth=[]；
获取（url）。然后（response=>response.json（））。然后（（数据）=>{
data.bdata.map（（书）=>{
auth.push（book.author）
})
这是我的国家({
作者：auth
})
})
}
render（）{
返回(
this.setSelectedAuthor（e.target.value）}>
选择作者
{
this.state.authors.map（（author，key）=>
{作者}
)
}
);
}
}
导出默认应用程序；

//AppContainer.js

import React, {Component} from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import Route from 'react-router-dom/Route'
import App from '../App';
import Header from '../components/header.js';
import AddBooks from "../components/AddBooks";

class AppContainer extends Component{
    render(){
        return(
            <Router>
                <div>
                    <Route path = "/" component={Header}/>
                    <Route exact path = "/" component={App}/>
                    <Route exact path = "/addBook" component={AddBooks}/>
                </div>
            </Router>
        );
    }
}

export default AppContainer;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router}；
从“反应路由器dom/路由”导入路由
从“../App”导入应用程序；
从“../components/Header.js”导入标题；
从“./components/AddBooks”导入AddBooks；
类AppContainer扩展组件{
render（）{
返回(
);
}
}
导出默认AppContainer；

@Chamali阅读此文了解情况

绑定功能

JavaScript中的绑定函数是一个绑定到给定上下文的函数。这意味着无论您如何称呼它，调用的上下文都将保持不变。唯一的例外是new操作符，它总是返回一个新上下文

要从常规函数中创建有界函数，请使用bind方法。bind方法将要将函数绑定到的上下文作为第一个参数。其余参数是始终传递给此类函数的参数。它返回一个有界函数作为结果。让我们看一个例子：

function add(x, y) {
  this.result += x + y;
}

var computation1 = { result: 0 };
var boundedAdd = add.bind(computation1);

boundedAdd(1, 2); // `this` is set to `computation1`.
                  //  computation1 after call: { result: 3 }

var boundedAddPlusTwo = add.bind(computation1, 2);
boundedAddPlusTwo(4); // `this` is set to `computation1`.
                      // computation1 after call: { result: 9 }

即使手动调用call和apply，也无法更改有界函数！参见以下示例：

var obj = { boundedPlusTwo: boundedAddPlusTwo };
obj.boundedPlusTwo(4); // `this` is set to `computation1`.
                       // even though method is called on `obj`.
                       // computation1 after call: { result: 15 }
var computation2 = { result: 0 };
boundedAdd.call(computation2, 1, 2); // `this` is set to `computation1`.
                                 // even though context passed to call is
                                 // `computation2`
                                 // computation1 after call: { result: 18 }

您现在已经掌握了有关JavaScript的这些知识。让我们跳到React组件类，看看函数调用上下文如何影响代码

---

希望这能消除您的疑虑。

TL:DR版本将应用程序类方法的上下文设置为与应用程序类上下文相同。用法：

this.setState

，

this.props

，等等。

可能的副本至少有3种方法可以在不使用

绑定的情况下执行相同操作。要理解为什么我们必须绑定

，意味着您必须理解这个如何在Javascript函数中工作。