当子组件是钩子时，Formik onChange Handler 不会触发

Question

使用 react + formik 制作表单并希望使用钩子来处理子组件状态。当我挂钩（哈哈）我的挂钩组件到我的表单时，formik onChange 处理程序不会按预期触发。

表格代码

... snip ...
  const classes = useStyles()
  return (
    <div>
      <FieldArray
        name='sessions'
        render={arrayHelpers => (
          <div>
            {values.sessions.map((data, i) => {
              return (
                <div className={classes.formControl} key={i}>
                  <TextField
                    margin='dense'
                    variant='outlined'
                    error={shouldShowError(
                      errors,
                      touched,
                      `sessions.${i}.name`
                    )}
                    style={{ display: 'flex', flex: 1 }}
                    value={values.sessions[i].name}
                    label={I18n.t('sessions.name.label')}
                    name={`sessions.${i}.name`}
                    onChange={handleChange}
                    onBlur={() => setFieldTouched(`sessions.${i}.name`)}
                  />
                  <DaysofWeek
                    value={values.sessions[i].days}
                    label={I18n.t('sessions.days.label')}
                    name={`sessions.${i}.days`}
                    onChange={handleChange}
                  />
... snip ...

当我将 DaysOfWeek 中的 onChange 行替换为 {data =>console.log(data)} 时，我在控制台中看到了我期望的数据。

我还应该注意，此表单中的 TextField 组件正确更新了 formik。

作为参考，以下是 DaysOfWeek 组件代码：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import FormControl from '@material-ui/core/FormControl'
import FormGroup from '@material-ui/core/FormGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import FormLabel from '@material-ui/core/FormLabel'
import Checkbox from '@material-ui/core/Checkbox'
import { symmetricDifference } from 'ramda'

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex'
  },
  formControl: {
    margin: theme.spacing(0)
  }
}))

export default function DaysofWeek ({ days = [], label = '', onChange }) {
  const classes = useStyles()
  const [stateDays, setState] = React.useState(days)

  const handleChange = value => _event => {
    let updatedDays = symmetricDifference([value], stateDays).sort()
    setState(updatedDays)
    onChange(updatedDays)
  }

  const staticDays = [
    [ 0, 'Sun' ],
    [ 1, 'Mon' ],
    [ 2, 'Tue' ],
    [ 3, 'Wed' ],
    [ 4, 'Thu' ],
    [ 5, 'Fri' ],
    [ 6, 'Sat' ]
  ]

  return (
    <div className={classes.root}>
      <FormControl component='fieldset' className={classes.formControl} >
        <FormLabel component="legend">{label}</FormLabel>
       { staticDays.map(([dayNum, dayLabel]) => 
        <FormGroup key={dayNum}>
          <FormControlLabel
            control={
              <Checkbox checked={stateDays.includes(dayNum)} onChange={handleChange(dayNum)} />
            }
            label={dayLabel}
          />
        </FormGroup>
       )}
      </FormControl>
    </div>
  )
}

package.json 的相关位：

    "@material-ui/core": "^4.3",
    "@material-ui/icons": "^4.2",
    "@material-ui/pickers": "^3.2.4",
    "classnames": "^2.2.6",
    "date-fns": "^2.0.1",
    ....
    "formik": "2.0.1-rc.13",
     ....
    "react": "^16.8.6",
    "react-apollo": "^2.5.5",
    "react-dom": "^16.8.6",
    "react-icons": "^3.6.1",
.....

如何从 formik 获取 onChange 来更新我的 formik 状态？

Answer 1

实际的问题是 formik 表单中 DaysofWeek 字段中的 onChange 处理程序。

我应该使用 formik 中的 setFieldValue： onChange={data => setFieldValue(sessions.${i}.days, data)}