Reactjs React/ES6-为什么在另一个函数中调用函数只适用于ES6箭头函数？

我有一个关于es6箭头函数的问题（在react中的示例中）。在我的示例代码中，我只想调用函数insight另一个函数。它只在我使用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>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
}
this.handleInput=this.handleInput.bind（this）；
this.testing=this.testing.bind（this）；
}
测试（）{
log（“你好”）
}
handleInput（）{
...
.然后（函数（）{
this.test（）//不起作用
test（）//不起作用
})
.then=>res{
//我实际上不需要参数，但它是
//除非我使用这种语法，否则不会工作
.this.test（）//有效
}
}
render（）{
返回(
你好{this.props.name}
);
}
}

因为您正在失去本机函数的上下文

让我解释一下。如果对“function test（）”调用类似“this.test（）”的func，则从当前调用上下文调用它。因此，“this”关键字将包含函数调用方的上下文环境。

---

另一方面，箭头函数总是将上下文与创建它们的对象或函数相匹配。

。使用非箭头函数时，上下文集是新的，而不是从外部函数继承的。如果在中使用箭头功能，则它将按预期工作。上下文将是外部的上下文。 请参阅此示例，了解arrow函数如何持久化上下文

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)

constpollpoption=（{options，selected，onChange，myTest}）=>{
log（“addafdj”，myTest）
返回(
{options.map（（选项，索引）=>(
onChange（e，index）}/>
{choice.tag}
))}  
);
};
const VoteCount=（{totalvoces，options}）=>{
返回(
总票数{总票数}

{options.map（（元素，索引）=>(
{element.tag}:{element.count}
))}

);
}
类opinion波尔扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
已选择选项：0，
总票数：0，
ChoiceOneNotes:0，
选择票数：0，
选项：[
{标记：“A”，计数：0}，
{标记：“B”，计数：0}，
{标记：“C”，计数：0}，
{标记：“D”，计数：0}
]
}
}
handleClick（）{
console.log（'submitted option'，this.state.selectedOption）；
this.setState（prevState=>{
返回{TotalVoces:prevState.TotalVoces+1}
})
const selectedIndex=this.state.selectedOption
const newOption=[…this.state.options]
调试器
新建选项[selectedIndex]。计数+=1
这是我的国家({
选项：新选项，
})
}
测试（数值）{
日志（“承诺有效”，值）
}
更改（e，索引）{
console.log（'selected option'，index）；
这是我的国家({
选择选项：索引
});
const newPromise=新承诺（（解决、拒绝）=>{
设置超时（（）=>{
决议（“11232”）
},1000)
})
newPromise.then（（值）=>{
本测试（值）
})
log（“handlechange中的状态”，this.state）
}
render（）{
const myTest=“你好，男孩”
返回(
{this.props.model.question}
this.handleOnChange（e，index）}
selected={this.state.selectedOption}/>
这个.handleClick（）}>投票！
);
}
}
var json={
问题：“你支持蛋糕中的饼干吗？”，
选择：
[
{文本：“是”，值：“是”}，
{文本：“否”，值：“否”}
]
}
const root=document.getElementById（“根”）；
ReactDOM.render（，根）
//render（测试，根）

此

绑定不同。关于这一点有很多信息。如果你打开transpilled code，你会得到一个线索，在使用arrow函数的情况下，有什么区别，上下文是如何正确绑定的。请阅读以下内容