如何从 React Bootstrap 中的 Form.Control 获取值？答案

【问题标题】：How do I get the value from Form.Control in React Bootstrap?如何从 React Bootstrap 中的 Form.Control 获取值？
【发布时间】：2021-03-28 11:15:25
【问题描述】：

这是我的代码：

<Modal centered size="lg" show={showAlertModal} onHide={handleCloseAlertModal}>
        <Modal.Header>
            <Modal.Title>{dpAlert !== null && dpAlert.id !== null ? `Alert #${dpAlert.id} - Editing` : `New Alert`}</Modal.Title>
        </Modal.Header>
        <Form onSubmit={handleSubmit}>
            <Modal.Body>
                <Form.Group controlId="language">
                    <Form.Label>Language</Form.Label>
                    <Form.Control id='inputL' onChange={(value) => setInputLanguage}  type="text" placeholder="Language" required />
                    <Form.Text className="text-muted">
                        This is used for internal reference only, not shown to the public
                    </Form.Text>
                </Form.Group>
                <hr />
                <b>Preview:</b>
                {getAlertPreview(dpAlert)}
            </Modal.Body>

            <Modal.Footer>
                <Button type="reset" variant="danger" size="lg" onClick={handleCloseAlertModal}>
                    Close
                </Button>

                <Button type="submit" variant="primary" size="lg" onClick={handleSubmit} form="newAlert">
                    Save
                </Button>
            </Modal.Footer>
        </Form>
    </Modal>

我正在尝试从中获取价值

<Form.Control id='inputL' onChange={(value) => setInputLanguage} type="text" placeholder="Language" required />

我已尝试使用 onChange 将值设置为某种状态，但它不起作用？感谢您的帮助，谢谢

【问题讨论】：

@NuwanAttanayake 当我尝试这种方式时，状态确实发生了变化，但是当我 console.log 它显示为“SyntheticEvent {dispatchConfig：null，_targetInst：null，_dispatchListeners：null，_dispatchInstances：null , …}" 而不是实际值

标签： javascript reactjs bootstrap-4 react-bootstrap

【解决方案1】：

您可以通过event.target.value获得

const setInputLanguage = event => {
    console.log(event.target.value);
}

<Form.Control id='inputL' onChange={(value) => setInputLanguage}  type="text" placeholder="Language" required />

或

<Form.Control id='inputL' onChange={event => console.log(event.target.value)}  type="text" placeholder="Language" required />

【讨论】：