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

Question

I created a small form where the user types a number and submits it by pressing the Enter key.

Currently, I created a hidden Button which has the onClick={handleSubmit} and type="submit" properties. This gives the user the illusion that the button does not exists. Everything works.

HOWEVER I think that the creation of the Button just that I can give it the onClick and the hide it, it is redundant.

I am wondering if there are other ways to submit a form without creating a button.

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>
    )

}

Try to add onSubmit props on <Form/>

Answer 2

You can try this:

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

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


function handleSubmit(event){
    event.preventDefault();
    console.log(newInventory)
    console.log(single_date)
}
const handleKeyDown = (ev)=>{
   if(ev.keyCode ===13){ // enter button
    formRef.current.submit()
   }
}

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

}