Question

我正在使用Redux-form和自定义Radio Group和Button组件。当我选择一个单选按钮时，redux-logger似乎表明状态是用正确的值更新的。但是 已检查 始终返回false，因此单选按钮样式永远不会更新。

console.log(value) returns the correct value
console.log(onChange(value) always returns undefined
console.log(checked) always returns false

RadioGroup.js

import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet } from 'react-native';
import RadioButton from '../components/RadioButton';
import { COLOR_PRIMARY } from '../constants';

const styles = StyleSheet.create({
  errorStyle: {
    color: COLOR_PRIMARY,
  },
});

const RadioGroup = (props) => {
  const { radios, input: { value, onChange }, meta: { touched, error } } = props;
  return (
    <View>
      {radios.map(radio => (
        <RadioButton
          key={radio.label}
          {...radio}
          onChange={onChange}
          checked={radio.value === value}
        />
      ))}
      {touched &&
        (error && (
          <View>
            <Text style={styles.errorStyle}>{error}</Text>
          </View>
        ))}
    </View>
  );
};

RadioGroup.propTypes = {
  radios: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
    }),
  ).isRequired,
  meta: PropTypes.shape({
    touched: PropTypes.bool.isRequired,
    error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  }).isRequired,
  input: PropTypes.shape({
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
    onChange: PropTypes.func.isRequired,
  }).isRequired,
};

export default RadioGroup;

RadioButton.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
import { COLOR_PRIMARY, TEXT_PRIMARY } from '../constants';

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  circle: {
    height: 24,
    width: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: COLOR_PRIMARY,
    alignItems: 'center',
    justifyContent: 'center',
  },
  circleFilled: {
    height: 14,
    width: 14,
    borderRadius: 7,
    backgroundColor: COLOR_PRIMARY,
  },
  labelStyle: {
    color: TEXT_PRIMARY,
    marginLeft: 10,
    marginRight: 10,
  },
});

export default class RadioButton extends Component {
  handlePress = () => {
    const { value, onChange, checked } = this.props;
    onChange(value);
    console.log(onChange(value));
    console.log(value);
    console.log(checked);
  };

  render() {
    const { checked, label } = this.props;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.handlePress} style={styles.radioStyle}>
          <View style={styles.circle}>
            <View style={checked ? styles.circleFilled : null} />
          </View>
        </TouchableOpacity>
        <Text style={styles.labelStyle}>{label}</Text>
      </View>
    );
  }
}

RadioButton.propTypes = {
  checked: PropTypes.bool.isRequired,
  label: PropTypes.string.isRequired,
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
  onChange: PropTypes.func.isRequired,
};

Form.js

<Field
   name="sex"
   radios={[{ label: 'Male', value: 'Male' }, { label: 'Female', value: 'Female' }]}
   component={RadioGroup}
        />

我使用 onChange 的方式有问题吗？

Redux-form，onChange（value）返回未定义的自定义Radio组件

0 个答案: