Saltar al contenido
Consejos

Cómo enviar el estado del componente actual como un parámetro a otro método externo usando React

El estado de envío a un método externo es similar al estado de paso a un componente infantil. Pasar este.estado al parámetro del método externo funcionará.

Aquí hay un ejemplo de un formulario de acceso. Tendrá el correo electrónico y la contraseña en su estado.

Cómo enviar el estado del componente actual como un parámetro a otro método externo usando React
Cómo enviar el estado del componente actual como un parámetro a otro método externo usando React
12345678910111213141516171819202122232425262728293031323334353637383940414243classLoginFormextendsComponente{ state ={ email:"", password:""};handleChange=e=essmessmessment- this.setState({[e.target.name]: e.target. value});render(){return(<Form>h2;Login</h2;<hr/&&;Form.GroupcontrolId="formBasicEmail"<Form.Label,;Dirección de correo electrónico</Form.Label,;Form.Controltype="email "placeholder="Enter email "onChange={this.handleChange}/&;Form. TextclassName="text-muted"> Nunca compartiremos tu correo electrónico con nadie más. </Form.Text;</Form.Group;<Form.GroupcontrolId="formBasicPassword"<Form.Label;;;Password</Form.Label;<Form.Controltype="password "placeholder="Password "onChange={this. handleChange}/{{lt;};/Formulario.Grupo{{l};};Form.GroupcontrolId="formBasicCheckbox"};Form.Checktype="checkbox "label="Check me out"/{lt;};/Form.Grupo{l};};Buttonvariant="primary "type="button"> Submit </Button>};/Form>);}}

jsx

Pasa el estado del componente a un método externo loginUser(), que se encargará de la solicitud de red para comprobar si el correo electrónico y la contraseña son correctos.

El método loginUser() se muestra a continuación.

12345constloginUser=asyncvalues=;{const res =awaitfetch({ url:SERVER_URL, method: "POST", body: values });const data =await res.json();return data;};

js

Ahora, llama al método loginUser() dentro del manejador onClick del componente dentro del formulario.

12345// ...<Buttonvariant="primary "type="button "onClick={()=// ...;Submit</Button=;// ...

jsx

El código completo del archivo de componentes es el siguiente.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859importReact,{ useState }de "reaccionar"; importFormfrom from "react-bootstrap/Form";importButtonfrom "react-bootstrap/Button";constloginUser=asyncvalues==;{const res =awaitfetch({ url: SERVER_URL, método: "POST", cuerpo: valores });const data =await res. json();return data;};classLoginFormextendsComponent{ state ={ email:"", password:""};handleChange=e=§;this.setState({[e.target.name]: e.target. value});render(){return(<Form;³³³$0027h2³$0027;Login</h2³$0027hr/³$0027hr$0027$0027;Form.GroupcontrolId="formBasicEmail"³³³$0027Form.Label$0027;Dirección de correo electrónico</Form.Label Controltype="email "placeholder="Enter email "onChange={this.handleChange}/;<Form.TextclassName="text-muted"``Nunca compartiremos tu correo electrónico con nadie más. </Form. Text;/Form.Group;/Form.GroupcontrolId="formBasicPassword"/Form.Label;/Contraseña</Form.Label;/Form.Label;/Form.Controltype="password "placeholder="Password "onChange={this. handleChange}/{{i};};/Formulario.Grupo{i};};Form.GroupcontrolId="formBasicCheckbox"};Form.Checktype="checkbox "label="Check me out"/{i};}Formulario. Group{;};Buttonvariant="primary "type="button "onClick={()=;loginUser(this.state)};Submit{N-Button{N-]};}}exportdefaultLoginForm;

jsx

Hay dos cosas a tener en cuenta aquí:

  1. Es mejor pasar las claves de estado explícitamente dentro del manejador de onClick en lugar de enviar todo el estado. Puedes terminar dando el estado interno al método a medida que haces futuros cambios.
12345678910<Buttonvariant="primary "type="button "onClick={()={{{const{ email, password }=this.state;loginUser({ email, password });}};Submit</Button

jsx
  1. 
Sólo se puede aprobar todo el estado en un componente basado en la clase. Los componentes funcionales tienen variables de estado individuales que son creadas por el gancho useState.