Uso react js como framework frontend y laravel como framework backend. También uso proxy. Tengo una función que maneja el envío de mi formulario. Cada vez que cargo mi página de formulario, recibo dos respuestas en mi consola, aunque todavía no he presionado el botón Enviar. Este es mi componente CreateDaerah. Yo uso componente de función
import React, { useEffect, useState} from 'react'; const CreateDaerah = () => { const [nama, setNama] = useState(''); const handleSubmit = (url = '', data = {}) => { fetch(url, { method: "POST", body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }) .then(response => console.log(response)) .catch(err => console.error(err));; } return( <div className="card-create"> <form onSubmit={handleSubmit(`/api/provinsi`, nama)}> <h1>Form Provinsi</h1> <label htmlFor="nama">Nama</label> <input type="text" className="nama-provinsi" name="nama" placeholder="masukkan nama" /> <button type="submit">Submit</button> </form> </div> ); }Además, ¿cómo puedo obtener el valor de nama de la entrada? ¿Debo usar el atributo onChange?
Esto se debe a que está llamando a handleSubmit inmediatamente en cada procesamiento en lugar de proporcionar una función para llamar en el envío. En su lugar, debe actualizarlo a algo como:
import React, { useEffect, useState} from 'react'; const CreateDaerah = () => { const [nama, setNama] = useState(''); const handleSubmit = (url = '', data = {}) => { fetch(url, { method: "POST", body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } }) .then(response => console.log(response)) .catch(err => console.error(err));; } return( <div className="card-create"> <form onSubmit={() => handleSubmit(`/api/provinsi`, nama)}> <h1>Form Provinsi</h1> <label htmlFor="nama">Nama</label> <input type="text" className="nama-provinsi" name="nama" placeholder="masukkan nama" /> <button type="submit">Submit</button> </form> </div> ); }Está llamando a la función handleSubmit inmediatamente en el renderizado, por lo que debe pasar una referencia a la función en su lugar con una devolución de llamada, o simplemente pasar la referencia de la función sin esos argumentos.
Probablemente no aprobaría esos argumentos. Ni siquiera usaría un elemento de form ya que los elementos no necesitan estar envueltos en él. Declararía la URL en el componente y colocaría handleSubmit en el botón. De esa manera, no tiene que lidiar con el formulario que actualiza la página.
Coloque un controlador onChange en su entrada que llame a una función que actualice el estado y haga que el valor de esa entrada sea el resultado del estado.
Aquí hay un ejemplo de trabajo más corto.
const { useState } = React; function Example() { const [ numa, setNuma ] = useState(''); const url = `/api/provinsi`; function handleInput(e) { setNuma(e.target.value); } function handleClick() { console.log('Button clicked'); console.log(`Final state: ${numa}`); // fetch(url) using numa state } return ( <div> <input value={numa} onChange={handleInput} /> <button onClick={handleClick}>Click me</button> </div> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>