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

您可以这样做：

^                       # beginning of line
  (?:                   # start non capture group
    19\d{2}             # 1900 --> 1999
   |                    # OR
    20[0-1][0-9]        # 2000 --> 2199
  )                     # end group
  (?:                   # start non capture group
    \/                  # a slash
    (?:                 # start non capture group
      19\d{2}           # 1900 --> 1999
     |                  # OR
      20[0-1][0-9]      # 2000 --> 2199
    )                   # end group
  )*                    # end group, may appear 0 or more times
$                       # end of line

要使其正常工作，您的输入需要有一个const changeState = (e) => { const {value, name} = e.target; setState({ ...state, [name]: value }) }道具，其字段名称为：name

Answer 2

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

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

useReducer

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

2 个答案: