ReactJS input type="number" 只响应微调按钮，不响应手动输入

Question

目前，我只能通过微调按钮更改输入字段的值。

但是当我在输入中单击以手动输入数字时，文本光标消失了，我无法在里面输入。我可以在输入时单击输入框，但这会起作用。下面是我的 React 代码的简化：

constructor(props) {
    super(props)
    this.state = {
        quantity: 1
    }
}

//This is just making some API call, but am I supposed to do anything else here to update the value?
handleQuantityChange(e) {
    this.props.editQuantity({
        quantity: e.target.value
    })
}

render() {
    return (
        <input type="number" value={this.state.quantity} onChange={this.handleQuantityChange.bind(this)}
    )
}

数字反应正确，但仅限于微调按钮。

Answer 1

输入是一个受控组件，这意味着它的值将始终是 value 属性中的值。您可以使用defaultValue 切换到不受控制的组件，也可以在每次更改时更新状态以便更新值。

this.setState({
    quantity: e.target.value
})