如何在 ReactJS 中将 usestate 与对象一起使用？答案

【问题标题】：How to use usestate with object in ReactJS?如何在 ReactJS 中将 usestate 与对象一起使用？
【发布时间】：2021-07-25 17:28:53
【问题描述】：

我正在尝试编写一个简单的程序，允许您在输入字段中输入您的名字和姓氏，以便根据您的姓名获得问候。但我无法让它工作。

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

【问题讨论】：

标签： javascript reactjs object

【解决方案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  {Savedinput.Fname} {Savedinput.Lastname}  </h1>
    </div>
  );
}

【讨论】：

React 中干净表单处理的非常好的示例。聪明地只使用一个更改处理程序而不是单独的。

【解决方案2】：

你不应该mutate state directly

要更改状态对象，您可以使用spread operator。所以你的代码会是这样的：

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

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

{...SavedInput} 会将整个对象扩展为参数，然后添加 Fname: ... 将覆盖该参数，因此将传递新值。

对于表单的更高级用法，我建议您使用react-hook-form

【讨论】：

@osama 各自的Fname 和Lastname 是您在useState({Fname: "", Lastname: ""}) 中设置的属性。并且对象属性不能未定义。如果您根据其他答案更改了输入，请恢复为您问题中的代码，我的答案基于该代码。

【解决方案3】：

firstName 和 lastName 可以有两种状态

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

【讨论】：

在onChange函数参数中添加e，如：onChange={(e) => setFirstName(e.target.value)}@Osama

【解决方案4】：

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

使用两种状态

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

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

然后分别在您的方法上分别为每个方法使用 setState

【讨论】：

【解决方案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>

您可以内联为此目的，而不是声明一个函数。另外，我建议您按顺序排列变量名称。这对你很重要。

【讨论】：

./src/App.js SyntaxError: C:\Users\Osama\Desktop\test\src\App.js: Unexpected token, expected "," (10:10)

【解决方案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>
  );
   }

你可以在link找到这个工作

【讨论】：