如何在 React 中输入值更改时保留初始状态？

Question

我有以下代码，只是想更新输入字段更改时的文本值。import React, { useState } from 'react';const Form = () => {    const initialState = {        name: 'John',        age: 25    };    const [{ name, age }, setFormState] = useState(initialState);    const handleNameChange = (e) => {        setFormState({            name: e.target.value        });    };    const handleAgeChange = (e) => {        setFormState({            age: e.target.value        })    };        return (        <>            <form onSubmit={(e) => e.preventDefault()}>                <label htmlFor='name'>Name: </label>                <input type='text' id='name' name='name' placeholder={name} onChange={handleNameChange} />                <p>The person's name is {name}.</p>                <br />                <label htmlFor='age'>Age: </label>                <input type='text' id='age' name='age' placeholder={age} onChange={handleAgeChange} />                <p>His/her age is {age}.</p>            </form>        </>    )}export default Form;这里有一个工作示例：https://codesandbox.io/s/react-playground-forked-tskj9 ?file=/Form.js问题是，当在姓名字段中输入值时，年龄字段会被清除，反之亦然。我知道这可能是由于initialState字段更改后不再有效，但是如何保留一个字段中的值<input>并<p>在另一个字段中输入值？

Answer 1

虽然您可以通过在 中包含其他属性来修复它setFormState，例如：

setFormState({

    name: e.target.value

    age,

});

函数组件不是类组件 - 如果它们不相关，请随意将值分离到单独的变量中。这将使语法变得更容易：

const Form = () => {

    const [name, setName] = React.useState('John');

    const [age, setAge] = React.useState(25);

    const handleNameChange = (e) => {

        setName(e.target.value);

    };

    const handleAgeChange = (e) => {

        setAge(e.target.value);

    };

    

    return (

        <form onSubmit={(e) => e.preventDefault()}>

            <label htmlFor='name'>Name: </label>

            <input type='text' id='name' name='name' placeholder={name} onChange={handleNameChange} />

            <p>The person's name is {name}.</p>

            <br />

            <label htmlFor='age'>Age: </label>

            <input type='text' id='age' name='age' placeholder={age} onChange={handleAgeChange} />

            <p>His/her age is {age}.</p>

        </form>

    )

}

ReactDOM.render(<Form />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div class="react"></div>

Answer 2

在useState钩子中，属性不会像以前在setState类组件的函数中那样合并。您必须包含缺失的字段，以将它们保留在对象中。

setFormState({

   name: e.target.value,

   age,

});