reactjs - 无需单击按钮即可提交 React 表单 - React Bootstrap

Question

我创建了一个小表单，用户可以在其中键入一个数字并按 Enter 键提交。

目前，我创建了一个隐藏的 Button，它具有 onClick={handleSubmit} 和 type="submit" 属性。 这给用户一种按钮不存在的错觉。 一切正常。

然而 我认为创建 Button 只是为了给它 onClick 并隐藏它，这是多余的。

我想知道是否有其他方法可以在不创建按钮的情况下提交表单。

function SingleInventoryChanger({single_inventory, single_date}) {
    const [newInventory, setNewinventory] = React.useState([{single_inventory}]);
    console.log(newInventory)

    function handleChange(event) {
            setNewinventory(event.target.value)
    }


    function handleSubmit(event){
        event.preventDefault();
        console.log(newInventory)
        console.log(single_date)
    }


    return(
        <div>
            <Form>
                <Form.Row>
                    <Col>
                        <Form.Control placeholder={single_inventory} onChange={handleChange} />
                    </Col>
                </Form.Row>
                <Button variant="secondary" type="submit" onClick={handleSubmit} > # I am referring to this button
                </Button> # I am referring to this button
            </Form>
        </div>
    )

}

Answer 1

function SingleInventoryChanger({single_inventory, single_date}) {
    const [newInventory, setNewinventory] = React.useState([{single_inventory}]);
    console.log(newInventory)

    function handleChange(event) {
            setNewinventory(event.target.value)
    }


    function handleSubmit(event){
        event.preventDefault();
        console.log(newInventory)
        console.log(single_date)
    }


    return(
        <div>
            <Form onSubmit={handleSubmit}>
                <Form.Row>
                    <Col>
                        <Form.Control placeholder={single_inventory} onChange={handleChange} />
                    </Col>
                </Form.Row>
            </Form>
        </div>
    )

}

尝试添加onSubmit Prop <Form/>