React TypeScript 16.8 如何从表单输入设置状态

Question

当组件加载时，默认状态会显示在姓名和年龄输入中，这很好，但我希望能够在表单字段中输入姓名和年龄，目前我不能，如果可以的话期望 name 和 age 输入中的值更新到状态。同样，当我按下按钮时。最后我觉得应该为状态设置类型定义。

我不明白如何从表单输入中获取值并将它们保存到状态。我不想使用占位符，因为在用户开始键入时会删除该值。我不确定如何为状态设置类型定义。

import React, {useState} from 'react';

const State: React.FC = () => {

  type StateTypes = {
    name: string,
    age: number
  }

  const [state, setState] = useState({
    name: 'Bill',
    age: 23,
  });

  const changeState = () => {
    setState({ 
      ...state, 
      name: 'Jim', 
      age: 25,
    })
  }

  return (
    <div className="home-grid">
      <div>
        <p>Name: {state.name}</p>
        <p>Age: {state.age}</p>
        <hr/>
        <input type="text" value={state.name} onChange={changeState} /><br/>
        <input type="number" value={state.age} onChange={changeState}/><br/>
        <button onClick = {changeState}>Update State</button>
      </div>
    </div>
  );
}

export default State;

Answer 1

你可以这样做：

const changeState = (e) => {
    const {value, name} = e.target; 
    setState({ 
      ...state, 
      [name]: value
    })
  }

为此，您的输入需要有一个带有字段名称的 name 属性：<input name="name" ... />

Answer 2

您可以在输入更改时更改状态，或者您可以创建组件的引用并在单击按钮时获取值。 但根据反应文档https://reactjs.org/docs/hooks-reference.html#usestate 更好的是，您可以通过使用多个 useState 尽可能保持状态平坦，因为在钩子中 react 不负责任何突变，如果您仍想保持嵌套状态，则可以使用 useReducer 钩子。

这里我刚刚做了一些事情，只是让我知道任何需要的更改。

const State = () => {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  const changeName = ({target}) => {
    setName(target.value)
  }

  const changeAge = ({target}) => {
    setAge(target.value)
  }

  const submitForm = () => console.log({name, age})

  return (
    <div className="home-grid">
      <div>
        <p>Name: {name}</p>
        <p>Age: {age}</p>
        <hr/>
        <input type="text" value={name} onChange={changeName} /><br/>
        <input type="number" value={age} onChange={changeAge}/><br/>
        <button onClick = {submitForm}>Update State</button>
      </div>
    </div>
  );
}