我可以合并多个基于 React 子组件回调设置状态的函数吗？

Question

我正在使用 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

Answer 1

您可以拥有一个包含更新状态的函数的对象：

家长

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