如何在reactjs中將usestate與對象一起使用？

Question

我正在嘗試編寫一個簡單的代碼，您可以在輸入字段中輸入您的名字和姓氏，以便根據您的姓名收到問候語。 但我不確定它是如何工作的

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [Savedinput, setSavedinput] = useState({Fname:' ' , Lastname:''} );
  const ChangeFirst = (e) => {
    setSavedinput Savedinput.Fname(e.target.value);
  };
  const ChangeLast = (e) => {
    setSavedinput Savedinput.Lastname(e.target.value);
    console.log(e.target.value);
  };
  return (
    <div className="App">
      <input type="Text" onChange={ChangeFirst}></input>
      <input type="Text" onChange={ChangeLast}></input>

      <h1> hello  {Fname} {Lastname}  </h1>
    </div>
  );
}

提前致謝

Answer 1

您可以使用解構方法。

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [Savedinput, setSavedinput] = useState({Fname:' ' , Lastname:''} );
  const onInputChange = (e, attr) =>{
      setSavedinput({...Savedinput, [attr]: e.target.value});
  }
  return (
    <div className="App">
      <input type="Text" onChange={(e)=>{onInputChange(e, 'Fname)}} value={Savedinput.Fname}></input>
      <input type="Text" onChange={(e)=>{onInputChange(e, 'Lastname)}} value={Savedinput.Lastname}></input>

      <h1> hello  {Fname} {Lastname}  </h1>
    </div>
  );
}

Answer 2

你不應該直接改變狀態

要更改狀態對象，您可以使用擴展運算符。 所以你的代碼會是這樣的：

  const ChangeFirst = (e) => {
    setSavedinput({...SavedInput, Fname: e.target.value})
  };

  const ChangeLast = (e) => {
    setSavedinput({...SavedInput, Lastname: e.target.value})
  };

{...SavedInput}將整個對象擴展為參數，然后添加Fname: ...將覆蓋它，因此將傳遞新值。

對於表單的更高級用法，我建議您使用react-hook-form

Answer 3

firstName 和 lastName 可以有 2 個狀態

export default function App() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
 
  return (
    <div className="App">
      <input type="Text" value={firstName} onChange={() => setFirstName(e.target.value)}></input>
      <input type="Text" value={lastName} onChange={() => setLastName(e.target.value)}></input>

      <h1> hello  {firstName} {lastName}  </h1>
    </div>
  );
}

Answer 4

<input type="Text" onChange={ChangeFirst}></input>
<input type="Text" onChange={ChangeLast}></input>

使用兩種狀態

const [firstName, setFirstName] = useState('')

const [lastName, setLastName] = useState('')

然后分別在您的方法上分別為每個方法使用 setState

Answer 5

首先setSavedinput是一個函數而不是一個變量。 它是一個函數，用於設置與其一起使用的變量的值。 由於您是從輸入字段中獲取值，因此以下方法可能適合您。

import React, { useState } from "react";
export default function App() {
      const [Savedinput, setSavedinput] = useState({Firstname:'' , Lastname:''} );
        return (
            <div className="App">
              <input type="text" value={Savedinput.Firstname} onChange={(e)=>setSavedinput({... Savedinput , Firstname:e.target.value })} />
              <input type="text" value={Savedinput.Lastname} onChange={(e)=>setSavedinput({... Savedinput , Lastname:e.target.value })} />

      <h1> hello  {Firstname} {Lastname}  </h1>
    </div>

為此，您可以不聲明函數，而是內聯。 另外，我建議您按順序保留變量名稱。 這會給你很多。

Answer 6

您可以將其用於對象和 ...savedinput 以僅更新更改的值來維護現有對象

export default function App() {
const [savedinput, setSavedinput] = useState({firstname:"", 
lastname:""});

 function ChangeFirst  (e) {
 savedinput.firstname = e
 setSavedinput({...savedinput})
 };

 function ChangeLast(e) {
 savedinput.lastname = e
 setSavedinput({...savedinput})
 };

return (
 <div className="App">

  <input type="Text" onChange={event => 
   ChangeFirst(event.target.value)}></input>

  <input type="Text" onChange={event => 
  ChangeLast(event.target.value)}>.  
   </input>

  <h1> hello  {savedinput.firstname }{savedinput.lastname}   </h1>
  </div>
  );
   }

你可以在這個鏈接中找到這個工作