Question

我有一个包含多种不同类型输入的表单，包括文本输入，复选框和单选按钮。由于围绕特定单选按钮集的数据的性质，我不得不将其提取到自己的组件中。奇怪的是，只要选择任何其他单选按钮，就会导致单选按钮组被取消选择。

我有一个“是”和“否”选项，映射到true / false。如果是这样，屏幕上会出现一个带复选框的元素。如果是假的，没有什么特别的事当它是真的，我从另一个单选按钮组中选择另一个单选按钮，它工作正常，但是当我选择“否”/假，然后选择一个单选按钮，它重置。几天来我一直对这个问题感到困惑，因为我继承了这个项目，我不确定是什么问题或我需要做什么。

这是我的代码，如果有人能提供一些见解

以下是与redux表单中的单选按钮组相关的代码：

import React from 'react';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
// import CheckboxList from '../../components/CheckboxList';
import Checkbox from 'material-ui/Checkbox';
import { find, findIndex } from 'lodash';

const safetyList = [
  { _id: '1',
    details: 'Hard Hats' },
  { _id: '2',
    details: 'Boots' },
  { _id: '3',
    details: 'Long Sleeves' },
  { _id: '4',
    details: 'Safety Googles' },
  { _id: '5',
    details: 'Steel Toe Shoes' },
  { _id: '6',
    details: 'Gloves' },
  { _id: '7',
    details: 'Dust Masks' },
  { _id: '8',
    details: 'High Vis Reflective Vests' },
  { _id: '9',
    details: 'Harness' },
  { _id: '10',
    details: 'Face Shield' },
  { _id: '11',
    details: 'Hearing Protection' },
  { _id: '12',
    details: 'Jeans/Long Pants' },
];

class Ppeinput extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      list: [],
    };
  }

  componentWillMount() {
    if (this.props.input.value.list) {
      this.setState({ list: this.props.input.value.list });
    }
  }

  toggle(event) {

    let open = event.target.value;
    if (open === 'true') {
      this.props.input.onChange({
        open: true,
        list: this.state.list,
      });
    } else {
      this.props.input.onChange({
        open: false,
        list: [],
      });
    }
  }

  onCheck(event, isInputChecked) {
    let initialArray = this.state.list;
    if (isInputChecked) {
      initialArray = [...initialArray, find(safetyList, { _id: event.target.value })];
    } else {
      initialArray.splice(findIndex(initialArray, { _id: event.target.value }), 1);
    }
    this.setState({ list: initialArray });
    // console.log(initialArray);
    this.props.input.onChange({
      open: true,
      list: initialArray,
    });
  }

  render() {
    const isOpen = this.props.input.value.open; // Get state of selected input
    const { meta } = this.props;
    return (
      <div className="page-form__block">
        <RadioButtonGroup name="ppe_input" defaultSelected={isOpen} onChange={::this.toggle}>
          <RadioButton value={true} label="Yes" />
          <RadioButton value={false} label="No" />
        </RadioButtonGroup>
        {meta.touched && meta.error && <div className="form-error">{meta.error}</div>}

        { isOpen ? (<div className="ppe_field">
          <u> Select the PPE </u>
          <ul>
          {safetyList.map((item) => {
            return find(this.props.input.value.list, { _id: item._id}) ? (
              <li key={item._id}>
                <Checkbox
                  label={item.details}
                  value={item._id}
                  onCheck={this.onCheck.bind(this)}
                  defaultChecked={true}
                />
              </li>
            ) : (
              <li key={item._id}>
                <Checkbox
                  label={item.details}
                  value={item._id}
                  onCheck={this.onCheck.bind(this)}
                />
              </li>
            )
          })}
          </ul>
        </div>) : (<div></div>) }

      </div>
    );
  }
}

export default Ppeinput;

这是RadioButtonGroup的实际组件：

{{1}}

Redux对我来说仍然是一个奇怪的概念，所以如果有人能够提供洞察力，那将非常感激！

Answer 1

因此无论出于何种原因，我在此特定实例中的React / Redux版本都不喜欢原始false值。它喜欢"false"。所以基本上，对于我的组件，我用true/false更改了"true"/"false"的任何实例，现在一切正常。我真的在React内部遇到了这个问题，我仍然不知道为什么会这样。但无论哪种方式，这都是我发现的解决方案。干杯！

Redux Material UI RadioButtonGroup - 由于奇怪的redux状态问题，所选输入保持重置

1 个答案: