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

Question

这是我的代码：

<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 在 state 中设置值，但它不起作用？ 感谢您的帮助

Answer 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 />