- Objective:
- Breadcrumb:
# 概念阐释
## 语义
这是更新表单常用的一套代码，在表单的`<input>`标签中使用`value`指向初始状态，使用`onChange(handleChange)`指向更新的状态。
## 语法
```jsx
setState(newStateValue)// setState中添加的是目标事件更新的值
```
3 种写法
```jsx
const handleChange = (event) => {
const newEmail = event.target.value;
setEmail(newEmail);
}
const handleChange = (event) => setEmail(event.target.value);
const handleChange = ({target}) => setEmail(target.value);//较常用的写法
```
# 实例
## 例1
```jsx
import React, { useState } from 'react';
export default function EmailTextInput() {
const [email, setEmail] = useState(''); //初始状态设置为空字符串
const handleChange = (event) => {
setEmail(event.target.value);
} //处理变化，更新的值为填写的新值
return (
<input value={email} onChange={handleChange} type="text"/>
<h2>Current User Input: </h2>
<h4>{email}</h4> //会实时显示输入的内容
);
}
```
## 例2
```jsx
import React from 'react';
import React,{useState} from 'react';
// regex to match numbers between 1 and 10 digits long
const validPhoneNumber = /^\d{1,10}$/;
export default function PhoneNumber() {
// declare current state and state setter
const[phone,setPhone] = useState('');
const handleChange = (event)=> {
const newPhone = event.target.value;
const isValid = validPhoneNumber.test(newPhone);
if (isValid) {
// 这一例子中，在更新状态前多了一步测试
setPhone(newPhone);
}
};
return (
<div className='phone'>
<label for='phone-input'>Phone: </label>
<input id='phone-input' value={phone} onChange={handleChange}/>
</div>
);
}
```
## 事件处理更新对象
`event.target.value` 只能传递字符串，因此在传递对象时，需要先将对象处理成字符串。[[React 练习题 切换视频内容]]
## 其他
`value={notes[item.id] || ''}` 的意思是：“将输入框的值设置为 `notes` 对象中以 `item.id` 为键的值。如果该值不存在或是假值，则将输入框的值设置为空字符串。”
# 相关内容
- 当代码的逻辑更加复杂时，最好将逻辑与 JSX 分开写，这样更易于阅读、测试和修改。[[React 组件 拆分（轮播图）]]
- 在React中，`<input>`是受控原素。在 React 文档中提供了[[React 受控和非受控组件]]的更多信息。
# 参考资料
- [Use State Setter Outside of JSX](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-ii/modules/wdcp-22-function-components-and-hooks-a2dba9bf-fc64-4118-8656-dfdc35f9e5cc/lessons/the-state-hook/exercises/use-state-setter-outside-of-jsx)