ReactJS输入类型=“数字”仅响应微调按钮，而不是手动输入

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
})