Могу ли я объединить несколько функций, которые устанавливают состояние на основе обратных вызовов от дочерних компонентов React? - PullRequest
Новая
       4

Могу ли я объединить несколько функций, которые устанавливают состояние на основе обратных вызовов от дочерних компонентов React?

2 голосов
/ 06 марта 2020

Я использую 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

1 Ответ

1 голос
/ 06 марта 2020

У вас может быть объект, содержащий функции для обновления состояния:

Родительский 

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
...