React使用react-bootstrap时Form.Control的onChange事件未触发

你的表单受控属性绑错了组件：

• 代码里把value={this.state.upc}和onChange={this.handleChange}写在了<Form.Text>组件上，这个组件是react-bootstrap提供的辅助说明文本组件，不接收用户输入，也不会触发onChange事件，自然你的handleChange永远不会被调用。
• 真正接收用户输入的<Form.Control type="text">输入框没有绑定任何受控属性，处于非受控状态：你输入的内容只存在原生DOM节点上，不会同步到React组件的state里，所以提交时拿到的upc始终是初始空字符串。

另外你代码里Form.Group的类名mb3写错了，bootstrap的间距类规范是mb-3，少了横杠会导致底部边距样式不生效，属于附带的小问题。

把受控绑定属性从<Form.Text>移动到实际的输入框<Form.Control>上即可，修正后的表单部分代码如下：

<Form onSubmit={this.handleSubmit}>
    <Form.Group className="mb-3" controlId="invUpcForm">
        <Form.Label>UPC</Form.Label>
        <Form.Control 
            type="text" 
            placeholder="123456789012"
            value={this.state.upc}
            onChange={this.handleChange}
        />
        <Form.Text className="text-muted">
            Ensure the field is focused, and scan the barcode.
        </Form.Text>
    </Form.Group>
    <Button variant="primary" type="submit">Submit</Button>
</Form>

修改后输入内容时会正常触发handleChange同步state，提交时就能拿到正确的upc值了。

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