Envíe un formulario de reacción sin hacer clic en un botón - React Bootstrap

2022-07-11 23:43:53

Creé un pequeño formulario donde el usuario escribe un número y lo envía presionando la tecla Intro.

Actualmente, creé un Button oculto que tiene las propiedades onClick={handleSubmit} y type="submit". Esto le da al usuario la ilusión de que el botón no existe. Todo funciona.

SIN EMBARGO Creo que la creación de Button solo puedo darle el onClick y ocultarlo, es redundante.

Me pregunto si hay otras formas de enviar un formulario sin crear un botón.

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

}

- Magofoco

Source
zh
Responder


2
  • 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>
        )
    
    }
    

    Intenta agregar accesorios onSubmit en <Form/>