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

Question

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

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

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来保持你的状态尽可能平坦，因为在钩子中，反应不负责任何突变，如果你仍然想保持嵌套状态，那么你可以使用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>
  );
}