“Usestate avec objet” Réponses codées

Mettre à jour l'objet dans les crochets React

- Through Input

        const [state, setState] = useState({ fName: "", lName: "" });
        const handleChange = e => {
            const { name, value } = e.target;
            setState(prevState => ({
                ...prevState,
                [name]: value
            }));
        };

        <input
            value={state.fName}
            type="text"
            onChange={handleChange}
            name="fName"
        />
        <input
            value={state.lName}
            type="text"
            onChange={handleChange}
            name="lName"
        />
   ***************************

 - Through onSubmit or button click
    
        setState(prevState => ({
            ...prevState,
            fName: 'your updated value here'
         }));

Difficult Dunlin

prestate in usestate

const [prevState, setState] = React.useState([]);

setState(prevState => [...prevState, 'somedata'] );

Salo Hopeless

Usestate avec objet

import React, { useState } from "react";

function Form() {
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "",
  });
  const { name, email, password } = user;
  const handleChange = (e) => {
    const { name, value } = e.target;
    setUser({
      ...user,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form Submitted");

    console.log(user);
  };

  return (
    <div>
      <h1>Registraction</h1>
      <form action="" onSubmit={handleSubmit}>
        <div className="formGroup">
          <label htmlFor="name">Name: </label>
          <input
            type="text"
            name="name"
            id="name"
            value={name}
            onChange={handleChange}
            required
          />
        </div>
        <div className="formGroup">
          <label htmlFor="email">Email: </label>
          <input
            type="email"
            name="email"
            id="email"
            value={email}
            onChange={handleChange}
            required
          />
        </div>
        <div className="formGroup">
          <label htmlFor="password">Password: </label>
          <input
            type="password"
            name="password"
            id="password"
            value={password}
            onChange={handleChange}
            required
          />
        </div>
        <div className="formGroup">
          <button className="count_btn" type="Submit">
            Register
          </button>
        </div>
      </form>
    </div>
  );
}
export default Form;

Noruzzaman Rubel

JavaScript React UseState Update Object

- Through Input

        const [state, setState] = useState({ fName: "", lName: "" });
        const handleChange = e => {
            const { name, value } = e.target;
            setState(prevState => ({
                ...prevState,
                [name]: value
            }));
        };

        <input
            value={state.fName}
            type="text"
            onChange={handleChange}
            name="fName"
        />
        <input
            value={state.lName}
            type="text"
            onChange={handleChange}
            name="lName"
        />
   ***************************

 - Through onSubmit or button click
    
        setState(prevState => ({
            ...prevState,
            fName: 'your updated value here'
         }));

Outrageous Opossum

Mettre à jour l'état dans UseState Hook

// declare state using useState hook.
// someState is set to someInitialState
const [someState, setSomeState] = useState(someInitialState);

// setSomeState updates the current state 
setSomeState(someOtherState);

Tomanator

Usestate avec objet

import { useState } from 'react';
import './App.css';

function App() {
  const [details, setDetails] = useState({ email: "", password: "" })
  const onChange = (e) => {
    const { name, value } = e.target;
    setDetails({ ...details, [name]: value })
  }
  const submitHandler = (e) => {
    e.preventDefault();
    alert(JSON.stringify(details))
  }
  return (
    <div className="App">
      <form onSubmit={submitHandler}>
        email : <input type="text" name="email" onChange={onChange} value={details.email} />
       //or <input type="text" name="email" onChange={(e) => setDetails({ ...details, email: e.target.value })} value={details.email} /><br /><br />
          password :<input type="text" name="password" onChange={onChange} value={details.password} />
        <button type="submit">Submit</button>
      </form>
      <h2>{details.email}</h2>
      <h2>{details.password}</h2>
    </div>
  );
}

export default App;

Abhishek

“Usestate avec objet” Réponses codées

Mettre à jour l'objet dans les crochets React

prestate in usestate

Usestate avec objet

JavaScript React UseState Update Object

Mettre à jour l'état dans UseState Hook

Usestate avec objet

Réponses similaires à “Usestate avec objet”

Questions similaires à “Usestate avec objet”

Parcourir les réponses de code populaires par langue

Shell/Bash

C#

C++

C

CSS

HTML

Java

JavaScript

Objective-C

PHP

Python

Sql

Swift

Ruby

TypeScript

Go

Kotlin

Assembly

R

VBA

Scala

Rust

Dart

Elixir

Clojure

Haskell

Matlab

Erlang

Cobol

Fortran

Scheme

Perl

Groovy

Lua

Julia

Delphi

Abap

Lisp

Prolog

Pascal

ActionScript

Basic

Solidity

PowerShell

GDScript

Excel

Parcourir d'autres langages de code