Javascript 未调用Input onChange（）事件

我正在呈现一个

输入

，其类型为

type='number'

输入的值为

this.state.value

输入和所有UI组件都是通过语义UI生成的，但我认为这并不重要

我还有一个自定义箭头菜单用于此输入，而不是原始输入[类型编号的输入有两个箭头用于减小/增大值]

---

Render（）

---

一旦改变 你可以放置任何东西

onChange(e) {
    console.log('====================================');
    console.log('Hello pals');
    console.log('====================================');
  }

---

问题是 每当我从

菜单中按下箭头时，
输入的
onChange（）
事件不会被触发。但是输入的值发生了变化

（当然，因为
this.state.value
变量在状态中发生了更改）

当然，如果我对原始箭头执行相同的操作，则值会按其应该的方式进行更改

这是为什么？我如何修复它？
onChange
仅在用户进入输入组件并与其交互以更改值（例如，如果他们键入新值）时才会调用<如果通过其他途径以编程方式更改值（在您的示例中，通过自定义菜单更改值），则不会调用code>onChange

这是预期的设计工作

如果您想触发onChange，那么从
increaseNumber
和
decreseNumber
方法调用它。
您可以用任何代码调用
onChange
，但如果您想反映新值，则需要根据事件的新输入值设置状态。

对于
decreaseNumber
和
increaseNumber
您也需要更改状态，但在这里您正在进行计算，因此您需要确保它是一个数字（或将其转换为一个数字），因为您将从事件中获取一个字符串

工作示例：


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数值：0
};
}
onChange=e=>this.setState（{value:e.target.value}）；
increaseNumber=（）=>this.setState（{value:Number（this.state.value）+1}）；
decreaseNumber=（）=>this.setState（{value:Number（this.state.value）-1}）；
render（）{
const{value}=this.state；
返回(
-
+
);
}
}
render（，document.getElementById（“根”））

Show full sample，onChange是在哪里定义的？据我所知，
onChange（）
是由模糊触发的，而不是由实际值触发的/text change onChange可以有任何您想要的内容，不管它的上下文是什么。这不太有效。计算的数字，我认为在我的情况下，它不是一个重要的对象。我的问题是onChange事件没有被触发。并不是说状态没有改变。我不知道你的答案是什么：/@ApostolisAnastasiou我已经用一个新的例子更新了我的答案，我希望它现在更清楚。只需对你的代码做一点修改。
递增编号
/
递减编号
中的
this.setState
是否必要？您可以通过
onChange
作为
target
传递新值。谢谢，你真的帮了大忙！抢手货我将更新我的代码。顺便说一下，我建议不要在
render
方法中绑定处理程序，因为它将在每次
render
调用中创建一个新的函数实例。这可以将react的差分算法设置为oof track，因为它可以反映为虚拟DOM树和真实DOM之间的更改，并可能导致不必要的DOM更新。嘿@Sag1v现在我检查了代码，我看到包含
输入的父
不会触发它应该触发的
onChange
。正如@Brandon最初解释的，触发
onChange（）
或以编程方式更改值不是更改输入值的正确方法。那么，对于包含更改时要触发的输入的
元素，您有什么想法吗？在那之前，我很抱歉不能把你的答案作为解决方案，因为它有这个bug，这对很多人和我来说都是很严重的。这看起来很合理，谢谢。但是我已经搜索了几分钟了，我应该如何通过
ref
调用这两个函数呢？尝试了此案例
{this.input=input}
，然后在我的
中尝试了此
此.input.increaseNumber（）
。但显然我没有访问它，因为那里不存在这样的函数。如果我可以问的话，我将如何访问这两个功能？我只是想在我把问题设置为已解决之前测试一下你的解决方案。
decreaseNumber(e) {
    this.setState({
      value: this.state.value - 1
    });
  }

  increaseNumber(e) {
    this.setState({
      value: this.state.value + 1
    });
  }

onChange(e) {
    console.log('====================================');
    console.log('Hello pals');
    console.log('====================================');
  }