React中input绑定onChange后this.state.quantity返回undefined如何解决

onChange事件回调里的取值逻辑写错了：事件对象e的target是当前触发事件的input DOM节点，这个节点上不存在quantity属性，所以每次执行setState时给quantity赋的值都是undefined，后续读取状态自然拿不到正确的输入值。

input输入框的用户输入内容统一存在e.target.value属性上，和你给input设置的id、name属性没有直接关联。另外你当前用的是type="number"的输入框，e.target.value默认返回字符串类型，如果状态需要存数字类型可以手动做类型转换。

修改onChange方法的取值逻辑即可：

onChange(e) {
  // 需要数字类型就用Number转换，要保留字符串格式直接写e.target.value即可
  this.setState({quantity: Number(e.target.value)})
}

额外注意 #

你放在form标签内的button没有指定type属性，默认是submit类型，点击时会触发表单默认提交行为导致页面刷新，也可能造成状态丢失。如果不需要表单默认提交，可以给按钮加上type="button"属性，或者在对应的事件回调里执行e.preventDefault()阻止默认行为。

内容的提问来源于stack exchange，提问作者GIRIDHAR B