Javascript 是否可以将函数引用分配给react中的状态？

在我的componenet中，我有两个按钮，我希望onClick函数根据组件状态改变

是否可以将函数引用分配给状态变量

比如说

 constructor() {
       this.foo = this.foo.bind(this);
       this.bar = this.bar.bind(this);
       this.state = {
         buttonMessage: "hello",
         buttonFunction: foo
       }
      }

    foo() {
      this.setState({
        buttonFunction: bar
      })
    }

    bar() {
      this.setState({
        buttonFunction: foo
      })
    }
   }

---

当我尝试上面的代码时，我得到一个错误，表示没有定义foo和bar。也许这只是一个语法错误？很高兴知道是否有可能将函数引用分配给状态变量。

从对原始问题的评论中讨论得出的简单答案：是的，这是可能的

我在示例中遇到的问题是，我在

this.setState（{buttonFunction:foo}）

中分配函数引用时忘记使用“this”，它应该是

this.setState（{buttonFunction:this.foo}）

以下代码将起作用：

 constructor() {
       this.foo = this.foo.bind(this);
       this.bar = this.bar.bind(this);
       this.state = {
         buttonMessage: "hello",
         buttonFunction: this.foo
       }
      }

    foo() {
      this.setState({
        buttonFunction: this.bar
      })
    }

    bar() {
      this.setState({
        buttonFunction: this.foo
      })
    }
   }

---

非常感谢尤里·塔拉班科（Yury Tarabanko）提供的帮助。

从对原始问题的评论中得出的简单答案是：是的，这是可能的

我在示例中遇到的问题是，我在

this.setState（{buttonFunction:foo}）

中分配函数引用时忘记使用“this”，它应该是

this.setState（{buttonFunction:this.foo}）

以下代码将起作用：

 constructor() {
       this.foo = this.foo.bind(this);
       this.bar = this.bar.bind(this);
       this.state = {
         buttonMessage: "hello",
         buttonFunction: this.foo
       }
      }

    foo() {
      this.setState({
        buttonFunction: this.bar
      })
    }

    bar() {
      this.setState({
        buttonFunction: this.foo
      })
    }
   }

---

非常感谢尤里·塔拉班科提供的帮助。

这是你想要的吗

//从“React”导入React；
类HelloKitty扩展了React.Component{
构造函数（args）{
超级（args）；
this.foo=this.foo.bind（this）；
this.bar=this.bar.bind（this）；
此.state={
按钮消息：“你好”，
按钮功能：this.foo
};
}
foo（）{
这是我的国家({
按钮功能：（）=>警报（'foo'），
})
}
bar（）{
这是我的国家({
按钮功能：（）=>警报（'bar'），
})
}
render（）{
返回(
我是福
我在酒吧
{this.state.buttonMessage}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
.root{
显示器：flex；
弯曲方向：立柱；
宽度：50%；
}
.根分区{
显示器：flex；
证明内容：之间的空间；
}
跨度{
边框：1px纯黑；
利润率：30像素；
填充：.5em；
宽度：100px；
光标：指针；
}
跨度：悬停{
背景色：#8f8；
}
这是你想要的吗


//从“React”导入React；
类HelloKitty扩展了React.Component{
构造函数（args）{
超级（args）；
this.foo=this.foo.bind（this）；
this.bar=this.bar.bind（this）；
此.state={
按钮消息：“你好”，
按钮功能：this.foo
};
}
foo（）{
这是我的国家({
按钮功能：（）=>警报（'foo'），
})
}
bar（）{
这是我的国家({
按钮功能：（）=>警报（'bar'），
})
}
render（）{
返回(
我是福
我在酒吧
{this.state.buttonMessage}
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
.root{
显示器：flex；
弯曲方向：立柱；
宽度：50%；
}
.根分区{
显示器：flex；
证明内容：之间的空间；
}
跨度{
边框：1px纯黑；
利润率：30像素；
填充：.5em；
宽度：100px；
光标：指针；
}
跨度：悬停{
背景色：#8f8；
}
对于功能部件：

 const [state, setState] = useState({
    viewToBarChange: "",
  });

<Tree
    setViewToBarChange={(callBack) => {
     setState({ ...state, viewToBarChange: callBack });
      }}
  >
</Tree>

const[state，setState]=useState({
viewToBarChange:“”，
});
{
setState（{…状态，viewToBarChange:callBack}）；
}}
>
对于功能部件：

 const [state, setState] = useState({
    viewToBarChange: "",
  });

<Tree
    setViewToBarChange={(callBack) => {
     setState({ ...state, viewToBarChange: callBack });
      }}
  >
</Tree>

const[state，setState]=useState({
viewToBarChange:“”，
});
{
setState（{…状态，viewToBarChange:callBack}）；
}}
>
为什么不试一试呢？我试过了，但我得到的错误是没有定义foo。也许是语法，也许不是。这就是我问的原因。对，但这与国家无关。您需要
按钮功能：this.bar
非常感谢，它通过添加“this”起到了作用。为什么不试试呢？我尝试过了，但我发现错误是foo没有定义。也许是语法，也许不是。这就是我问的原因。对，但这与国家无关。您需要
按钮功能：this.bar
非常感谢，它通过添加“this”起作用。几乎不完全是这样。我还希望onclick函数是this.state.buttonfunction几乎，而不是完全。我还希望onclick函数是this.state.buttonFunction