React/ES6 - 爲什麼在另一個函數中調用一個函數只適用於es6箭頭函數？

Question

我有一個關於es6箭頭函數的承諾（在我的例子中反應）的問題。在我的示例代碼中，我只想調用一個函數洞察另一個函數。它只適用於我使用es6。我一直在網上閱讀，但我不完全明白爲什麼它只適用於es6。

class App extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    } 
    this.handleInput = this.handleInput.bind(this); 
    this.testing = this.testing.bind(this); 
} 

testing(){ 
console.log("hello") 
} 

handleInput(){ 
    ... 
.then(function(){ 
    this.test() //doesnt work 
    test() //doesnt work 
}) 
.then => res{ 
// I actually don't require parameters, but it's 
// never working unless I use this syntax 
.this.test() // WORKS 
} 
} 

    render() { 
    return (
     <div> 
     Hello {this.props.name} 
     </div> 
    ); 
    } 
} 

Answer 1

因爲你失去了原生功能的上下文。

讓我解釋一下。如果你爲'function test（）'調用func'this.test（）'，你可以從當前的調用上下文中調用它。所以'this'關鍵字將包含函數調用者的上下文環境。 對於另一面，箭頭函數總是將上下文與創建它們的對象或函數進行匹配。

Answer 2

這一切都與上下文有關。當你使用非箭頭函數的上下文集合是新的，而不是從外部函數繼承的。如果您使用箭頭功能，那麼它將按預期工作。上下文將是外部的。 看到這個例子，箭頭函數如何保持上下文

const PollOption = ({options,selected, onChange, myTest}) => { 
    console.log("addafafdj", myTest) 
    return (
    <div className="pollOption"> 
     {options.map((choice, index) => (
     <label key={index}> 
     <input type="radio" 
       name="vote" 
       key={index} 
       onChange={(e)=>onChange(e,index)}/> 
       {choice.tag} 
     </label> 
    ))} 
    </div> 
    ); 
}; 

const VoteCount = ({totalVotes, options}) =>{ 
    return(
     <div className="VoteCount"> 
      <h2>Total Votes {totalVotes}</h2> 
      <ul> 
      {options.map((element,index)=>(
       <li>{element.tag}: {element.count}</li> 
      ))} 
      </ul> 
     </div> 
); 
} 



class OpinionPoll extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedOption: 0, 
     totalVotes: 0, 
     choiceOneVotes: 0, 
     choiceTwoVotes: 0, 
     options: [ 
     {tag:"A", count:0}, 
     {tag:"B", count:0}, 
     {tag:"C", count:0}, 
     {tag:"D", count:0} 
     ] 
    } 
    } 

    handleClick(){ 
    console.log('submitted option', this.state.selectedOption); 
    this.setState(prevState => { 
     return {totalVotes: prevState.totalVotes + 1} 
    }) 
    const selectedIndex = this.state.selectedOption 
    const newOption = [...this.state.options] 
    debugger 
    newOption[selectedIndex].count += 1 
    this.setState({ 
     options: newOption, 
    }) 
    } 
    test(value) { 
    console.log("promise worked", value) 
    } 
    handleOnChange(e,index){ 
    console.log('selected option', index); 
    this.setState({ 
     selectedOption: index 
    }); 
    const newPromise = new Promise((resolve,reject)=> { 
     setTimeout(()=> { 
     resolve("11232") 
     },1000) 
    }) 
    newPromise.then((value)=> { 
     this.test(value) 
    }) 
    console.log("state in handlechange",this.state) 
    } 

    render(){ 
    const myTest = "hola boy" 
    return (
     <div className="poll"> 
     {this.props.model.question} 
     <PollOption 
      myTest 
      options={this.state.options} 
      onChange={(e,index) => this.handleOnChange(e,index)} 
      selected={this.state.selectedOption}/> 

     <button onClick={() => this.handleClick()}>Vote!</button> 
     <VoteCount 
      totalVotes={this.state.totalVotes} 
      options={this.state.options} 
      /> 
     </div> 
    ); 
    } 
} 



var json = { 
     question: 'Do you support cookies in cakes?', 
     choices: 
     [ 
      {text: "Yes", value: "yes"}, 
      {text: "No", value: "no"} 
     ] 
    } 
const root = document.getElementById("root"); 
ReactDOM.render(<OpinionPoll model ={json} />, root) 
//ReactDOM.render(<div>test </div>, root)