1

我遇到了一个问题，即 redux 没有获得 onChange 值状态（状态相等）

这是我的代码

ReduxFormDropdown.js

import React from 'react'
import { PropTypes } from 'prop-types'
import { Icon, Dropdown } from 'semantic-ui-react'
import FormLabel from '../FormLabel'

export const ReduxFormDropdown = ({
  input,
  label,
  placeholder,
  meta: {
    error,
    touched,
  },
  ...custom
}) => {
  const errorMessage = (
    <div style={{ color: '#E20000', paddingTop: '.3rem', fontSize: '12px' }} >
      <Icon name="warning" />
      {error}
    </div>
  )

  return (
    <div>
      <FormLabel>{label}</FormLabel>
      <Dropdown
        placeholder={placeholder}
        value={input.value}
        onChange={(param, data) => props.input.onChange(data.value)}
        error={touched && error}
        selection
        {...input}
        {...custom}
      />
      {touched && error && errorMessage}
    </div>
  )
}

ReduxFormDropdown.propTypes = {
  input: PropTypes.object.isRequired,
  label: PropTypes.string,
  placeholder: PropTypes.string,
  meta: PropTypes.shape({
    touched: PropTypes.bool,
    error: PropTypes.string,
  }),
}

表单.js

//...      
const genders = [
  {
    key: '1',
    text: 'Male',
    value: 'male',
  },
  {
    key: '2',
    text: 'Female',
    value: 'female',
  },
  {
    key: '3',
    text: 'Other',
    value: 'other',
  },
]
//...    

<Form.Field>
  <Field
   name="gender"
   component={ReduxFormDropdown}
   placeholder="Gender"
   options={genders}
  />
</Form.Field>
//...

当我选择时该值没有改变，当我检查 redux 开发工具时，我发现该值没有得到更新（状态相等）。我错过了什么？谢谢您的答复。

4

1 回答 1

3

我强调了最重要的几行：

<Dropdown
  onChange={(param, data) => props.input.onChange(data.value)}
  {...input}
/>

props.input并且input是包含onChange函数的相同对象。因此，当您将input对象传播到Dropdown组件时，您将覆盖onChange处理程序。

正确的用法是：

<Dropdown
  {...input}
  onChange={(param, data) => props.input.onChange(data.value)}
/>
于 2017-06-12T07:21:13.513 回答