javascript - 我可以合并多个基于 React 子组件回调设置状态的函数吗?
问题描述
我正在使用 React 钩子来设置状态。有一个父组件有多个子组件。父组件具有状态,并将函数传递给子组件以作为回调更新其状态。
子组件是一样的,只是接收不同的函数回调来更新父组件中的相关状态。
我的问题是,我可以handleChange
在父级中编写一个函数,允许我使用此函数回调结构在父级中设置多个状态值吗?
父组件:
import React, { useState } from 'react'
import Control from './Control'
const Sort = () => {
const [controlUpValues, setControlUpValues] = useState([])
const [controlDownValues, setControlDownValues] = useState([])
const handleControlUpChange = values => {
setControlUpValues(values)
}
const handleControlDownChange = values => {
setControlDownValues(values)
}
return
<>
<Control
setControlItems={handleControlUpChange}
/>
<Control
setControlItems={handleControlDownChange}
/>
</>
)
}
export default Sort
子组件:
import React, { useState } from 'react'
import { Button, TextField } from '@material-ui/core'
function Control({ setControlItems }) {
const [controlInputValues, setControlInputValues] = useState([])
const [inputRef, setInputRef] = useState([])
const [inputValues, setInputValues] = useState([])
const handleValueChange = () => setInputValues(inputRef.value)
const addValuesToItems = () => {
setControlItems(inputValues)
}
return (
<div>
<TextField
inputRef={ref => setInputRef(ref)}
value={controlInputValues ? controlInputValues : ''}
onChange={handleValueChange}
/>
<Button
onClick={addValuesToItems}
>
Add
</Button>
</div>
)
}
export default Control
解决方案
您可以拥有一个包含更新状态的函数的对象:
家长
import React, { useState } from 'react'
import Control from './Control'
const Sort = ({ classes }) => {
const [controlBoostValues, setControlBoostValues] = useState([])
const [controlBuryValues, setControlBuryValues] = useState([])
const functions = {
boost: setControlBoostValues,
bury: setControlBuryValues
}
const handleChange = (key, values) => functions[key](values);
return
<>
<Control
setControlItems={handleChange}
/>
<Control
setControlItems={handleChange}
/>
</>
)
}
孩子 :
import React, { useState } from 'react'
import { Button, TextField } from '@material-ui/core'
function Control({ setControlItems }) {
const [controlInputValues, setControlInputValues] = useState([])
const [inputRef, setInputRef] = useState([])
const [inputValues, setInputValues] = useState([])
const handleValueChange = () => setInputValues(inputRef.value)
const addValuesToItems = () => {
setControlItems("boost" , inputValues)
}
return (
<div>
<TextField
inputRef={ref => setInputRef(ref)}
value={controlInputValues ? controlInputValues : ''}
onChange={handleValueChange}
/>
<Button
onClick={addValuesToItems}
>
Add
</Button>
</div>
)
}
export default Control
推荐阅读
- java - LibGDX - 是否可以指定全屏分辨率?
- c# - 单例、异步、ReaderWriterLock
- c++ - 统一初始化语法的使用
- javascript - ", expected" in opening and closing brackets, ESLint and JavaScript
- python - python请求带有标头和参数的POST
- c - reading values from file, line by line in c
- c# - How do I make the iTween plugin work with Unity 2018?
- java - Installing apache-maven-3.5.4-bin.zip (can't set file paths properly)
- python - Unable to pip install pandas due to requirements
- php - Font Awesome 5 treatment of embedded icons in form input fields - Formatting is off vs V4.7