Question

我无法理解为什么在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;

// 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;

Answer 1

@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 }

即使手动拨打电话也无法更改有界功能！请参阅以下示例：

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组件类，看看函数调用上下文如何影响你的代码。

More details

React Binding Patterns: 5 Approaches for Handling this

希望这可以解除你的怀疑。

Answer 2

TL：DR版本是它将App类方法的上下文设置为与App类上下文相同。用途：this.setState，this.props等......

有.bind（）的目的

2 个答案: