React formcontrol onChange未被触发

发布于 2025-02-06 06:37:35 字数 1748 浏览 2 评论 0原文

我试图在React中获得一个简单的形式，但我似乎无法正常工作。我还为我的GUI组件使用react-bootstrap。我有一个称为库存的组件，该组件保存表单：

class Inventory extends React.Component {
    constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

        this.state = {
            'upc' : ''
        }
    }

    handleChange(event) { this.setState({'upc' : event.target.value }); }

    handleSubmit(event) {
        // Do some stuff
    }

    render() {
        return (
            <Container fluid>
                <h1>Inventory Page</h1>
                <Row>
                    <Col>
                        <Form onSubmit={this.handleSubmit}>
                            <Form.Group className="mb3" controlId="invUpcForm">
                                <Form.Label>UPC</Form.Label>
                                <Form.Control type="text" placeholder="123456789012" />
                                <Form.Text value={this.state.upc} onChange={this.handleChange} className="text-muted">
                                    Ensure the field is focused, and scan the barcode.
                                </Form.Text>
                            </Form.Group>
                            <Button variant="primary" type="submit">Submit</Button>
                        </Form>
                    </Col>
                </Row>
            </Container>
        );
    }
}

但是，尽管我在字段的值更改时，每当我在输入字段中输入任何文本时，handlechange都永远不会被调用。如果我提交字段，请在状态中检查upc的值，显示其为空''。

我在做什么错？

原文

I am trying to get a simple form working in React but I can't seem to get it working. I am also using react-bootstrap for my GUI components.
I have a component called Inventory that holds the form:

class Inventory extends React.Component {
    constructor(props) {
        super(props);

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);

        this.state = {
            'upc' : ''
        }
    }

    handleChange(event) { this.setState({'upc' : event.target.value }); }

    handleSubmit(event) {
        // Do some stuff
    }

    render() {
        return (
            <Container fluid>
                <h1>Inventory Page</h1>
                <Row>
                    <Col>
                        <Form onSubmit={this.handleSubmit}>
                            <Form.Group className="mb3" controlId="invUpcForm">
                                <Form.Label>UPC</Form.Label>
                                <Form.Control type="text" placeholder="123456789012" />
                                <Form.Text value={this.state.upc} onChange={this.handleChange} className="text-muted">
                                    Ensure the field is focused, and scan the barcode.
                                </Form.Text>
                            </Form.Group>
                            <Button variant="primary" type="submit">Submit</Button>
                        </Form>
                    </Col>
                </Row>
            </Container>
        );
    }
}

However, whenever I enter any text into the Input field, handleChange never gets called despite the value of the field changing. If I submit the field, checking the value of upc in state shows it is empty ''.

What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

み格子的夏天 2025-02-13 06:37:38

你必须这样改变。

 render() {
        return (
            <Container fluid>
                <h1>Inventory Page</h1>
                <Row>
                    <Col>
                        <Form onSubmit={this.handleSubmit}>
                            <Form.Group className="mb3" 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>
                    </Col>
                </Row>
            </Container>
        );
    }

这是因为form.control是一个真实的输入组件，并且form.text组件只是简单的div/跨度渲染文本。您可以通过检查Chrome浏览器中的元素来检查它。

You gotta change like this.

 render() {
        return (
            <Container fluid>
                <h1>Inventory Page</h1>
                <Row>
                    <Col>
                        <Form onSubmit={this.handleSubmit}>
                            <Form.Group className="mb3" 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>
                    </Col>
                </Row>
            </Container>
        );
    }

It is because Form.Control is a real input component, and Form.Text component is just a simple div/span to render text. You can check it by inspecting element in chrome browser.

回复收藏 0 原文

此刻的回忆 2025-02-13 06:37:37

根据此示例来自 react-bootstrap docs ，您应该附加您的value> value和和<代码> onChange props of ＆lt; form.control/＆gt;组件，而不是＆lt; form.text/＆gt;。表单文本是用于帮助文本的，而表单控制处理实际输入元素。