0

所以我要做的是在另一个用户输入发生变化uncheck a checkbox时切换或切换组件。现在的问题是，内部组件的道具正在相应地改变我希望它改变的方式，但状态不是。（这只发生在我想以编程方式取消选中其中一个组件时）这会导致在视觉上仍然检查。SwitchBasecheckedcheckedunchecked checkbox

此图像上显示的案例：

外观 编码

文本.jsx

`import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

import TextField from 'material-ui/TextField';
import { FormControlLabel } from 'material-ui/Form';

import { Checkbox, FlatButton, SnackbarMessage } from 'components/muiOverrides';
import { QuestionInfo } from 'components';

import headerImg from 'assets/img/custom_text.png';
import enhance from './enhancers';
import './Text.scss';

const Text = ({ questionModel, questionState, onChangeText, markQuestionEmpty, prevProps, nextProps, isStateValid, isSnackbarVisible, setSnackbarVisible, sendAction }) => (
  <div className="text-survey">
    <img src={ headerImg } alt="noimg"/>
    <h1>{ questionModel.title }</h1>
    <QuestionInfo description={ questionModel.description }/>
    <TextField
      label={ questionModel.inputLabel }
      multiline
      rows={ 5 }
      value={ questionState.values.toString() }
      onChange={ onChangeText }
      InputProps={ {
        disableUnderline: true
      } }
      style={ { width: '40%' } }
      InputLabelProps={ {
        shrink: true
      } }
    />
    <div className="no-answer-checkbox">
      <FormControlLabel
        control={ <Checkbox
          checked={ questionState.skippedQuestion }
          onChange={ (event, checked) => (markQuestionEmpty(checked)) }
        /> }
        label={ questionModel.skipCheckBoxLabel }
      />
    </div>
    <div>
      <FlatButton
        { ...prevProps }
        component={ Link }
      >
        { prevProps.label }
      </FlatButton>
      <FlatButton
        onClick={ event => (isStateValid(event) ? sendAction(questionState) : null) }
        { ...nextProps }
        component={ Link }
      >
        { nextProps.label }
      </FlatButton>
    </div>
    <SnackbarMessage
      open={ isSnackbarVisible }
      message={ questionModel.invalidStateMessage }
      messageType="error"
      onRequestClose={ () => setSnackbarVisible(false) }
    />
  </div>
);

Text.propTypes = {
  questionModel: PropTypes.object.isRequired,
  questionState: PropTypes.object.isRequired,
  onChangeText: PropTypes.func.isRequired,
  markQuestionEmpty: PropTypes.func.isRequired,
  prevProps: PropTypes.object.isRequired,
  nextProps: PropTypes.object.isRequired,
  setSnackbarVisible: PropTypes.func.isRequired,
  isSnackbarVisible: PropTypes.bool.isRequired,
  isStateValid: PropTypes.func.isRequired,
  sendAction: PropTypes.func.isRequired
};

export default enhance(Text);`

textjsx enhancers.js
`import { compose, withHandlers, withStateHandlers } from 'recompose';

export const onChangeText = ({ questionModel, saveAction }) => event => {
  const question = {
    id: questionModel.id,
    type: questionModel.type,
    skippedQuestion: false,
    values: [event.target.value]
  };
  saveAction(question);
};

export const markQuestionEmpty = ({ questionModel, saveAction }) => skippedQuestion => {
  const question = { id: questionModel.id, type: questionModel.type, skippedQuestion, values: [] };
  saveAction(question);
};

const isStateValid = ({ questionState, setSnackbarVisible }) => event => {

  const isValid = (!questionState.values[0] && questionState.skippedQuestion) ||
    questionState.values[0];

  if (event && !isValid) {
    event.preventDefault();
    setSnackbarVisible(true);
  }

  return isValid;
};


const initialState = {
  isSnackbarVisible: false
};

const setSnackbarVisible = () => boolean => ({ isSnackbarVisible: boolean });

const stateHandlers = {
  setSnackbarVisible
};

export default compose(
  withStateHandlers(initialState, stateHandlers),
  withHandlers({ onChangeText, markQuestionEmpty, isStateValid }),
);
`

有人对此有解决方案吗？

4

0 回答 0