使用 React Hooks 和 useState 重构表单
介绍
React Hooks 是我之前决定以后再研究的东西之一。我听说过很多关于它的好评，所以现在就决定研究一下。我有一个带表单的组件，我觉得可以用 Hooks 重构一下，于是就从这里入手。循序渐进总是更容易的。
前
没什么特别的，我们使用material-ui框架创建了一个对话框组件。然后在其中放置了三个文本输入框（TextField）：
export default class AddItemPopup extends React.Component {
constructor(props){
super(props)
this.state = {
name: '',
quantity: 0,
unitCost: 0
}
}
handleInputChange = e => {
const {name, value} = e.target
this.setState({
[name]: value
})
}
addItem = () => {
const {name, quantity, unitCost} = this.state
if(!name || !quantity || !unitCost) return
this.props.saveItem(this.state)
}
render(){
const {open, closePopup} = this.props
const {name, quantity, unitCost} = this.state
return(
<Dialog
open={open}
onClose={closePopup}>
<DialogTitle>Add new item</DialogTitle>
<DialogContent>
<TextField
name='name'
label='Item name/Description'
onChange={this.handleInputChange}
value={name}/>
<TextField
name='quantity'
label='Quantity'
onChange={this.handleInputChange}
value={quantity}/>
<TextField
name='unitCost'
label='Unit Cost'
onChange={this.handleInputChange}
value={unitCost}/>
</DialogContent>
<DialogActions>
<Button onClick={closePopup} color="secondary" variant="contained">
Cancel
</Button>
<Button onClick={this.addItem} color="primary" variant="contained">
Save
</Button>
</DialogActions>
</Dialog>
)
}
}
我已经把导入语句放在文件顶部了，但你应该明白我的意思。这是一个包含表单和状态的类组件，用于跟踪表单输入的值。现在，让我们使用 useState hook 重写这个组件。
// Import the hook first
import React, {useState} from 'react'
const AddItemPopup = ({
open,
closePopup,
saveItem
}) => {
const handleInputChange = e => {
const {name, value} = e.target
setValues({...values, [name]: value})
}
const addItem = () => {
const {name, quantity, unitCost} = values
if(!name || !quantity || !unitCost) return
saveItem(values)
}
// Declare our state variable called values
// Initialize with our default values
const [values, setValues] = useState({name: '', quantity: 0, unitCost: 0})
return(
<Dialog
open={open}
onClose={closePopup}>
<DialogTitle>Add new item</DialogTitle>
<DialogContent>
<TextField
name='name'
label='Item name/Description'
onChange={handleInputChange}
value={values.name}/>
<TextField
name='quantity'
label='Quantity'
onChange={handleInputChange}
value={values.quantity}/>
<TextField
name='unitCost'
label='Unit Cost'
onChange={handleInputChange}
value={values.unitCost}/>
</DialogContent>
<DialogActions>
<Button onClick={closePopup} color="secondary" variant="contained">
Cancel
</Button>
<Button onClick={addItem} color="primary" variant="contained">
Save
</Button>
</DialogActions>
</Dialog>
)
}
export default AddItemPopup
砰！我们的组件现在变成了一个函数。我们做了什么：
- useState返回两样东西：当前状态（这里是values）和一个可以更新它的函数（这里是setValues）。
- useState接受一个参数：初始状态。
- onChange 处理函数现在使用setValues函数来修改组件的内部状态。如您所见，values变量在组件的任何位置都可访问。
注：我们也可以使用三个不同的钩子来分别更新每个输入，您可以根据自己的喜好选择更易读的方式 ;)
文章来源：https://dev.to/damcosset/refactor-a-form-with-react-hooks-and-usestate-1lfa