Question

我的用户界面中有一个渴望框，该框对我选择的值返回true，但我想传递从该框中选择的值而不是true。

在这里，如果我选择乳制品并在控制台中进行检查，它将显示为true：但是我要使用相同的所选名称而不是true：就像Dairy product => Dairy product

这是我的DIV：

<Section>
              <img className={'sectionCircleImage'} src={Images.checkInCravings} alt="" />
              <div className={'sectionHeading'}>CRAVINGS</div>
              <BooleanQuestion
                modalTitle={'CRAVINGS'}
                question={'Did you crave anything today?'}
                selected={checkInForm.cravings}
                answer={(ans) => this.props.changeCravings(ans)}
              />
            </Section>

这是我的BooleanQuestion文件：

import React from 'react';
import { map, includes, isEmpty, values, every } from 'lodash';
import PropTypes from 'prop-types';
import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
} from 'reactstrap';
import './styles.css';

class BooleanQuestion extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.state = {
      selectedAnswer: null,
      showModal: false,
      modalOptions: '',
    };
  }

  componentDidMount = () => {
    const { selected } = this.props;
    typeof selected === 'string' && this.setState({ selectedAnswer: selected });
    typeof selected !== 'string' && this.setState({
      modalOptions: selected,
      selectedAnswer: (this.answerFromModalOptions(selected)),
    });
    if (selected === null) this.setState({ selectedAnswer: null });
  }

  getModalRows = () => {
    const { modalOptions } = this.state;
    if (!isEmpty(modalOptions)) {
      return map(Object.keys(modalOptions), (key) => {
        const selected = modalOptions[key];
        return (
          <div
            role={'presentation'}
            key={key}
            onClick={() => {
              const updatedOptions = { ...modalOptions };
              updatedOptions[key] = !selected;
              this.setState({ modalOptions: updatedOptions, selectedAnswer: 'yes' });
              this.props.answer(updatedOptions.values);
            }}
            className={
            selected === true
            ? 'selected modalRow noTextSelect'
            : 'modalRow noTextSelect'
            }
          >
            {key}
          </div>
        );
      });
    }
    return null;
  }

  setAnswer = (answer) => {
    if (typeof this.props.selected === 'string' || this.props.selected === null) {
      answer === 'yes'
      ? (
        this.setState({ selectedAnswer: 'yes' }),
        this.props.answer('yes')
      )
      : (
        this.setState({ selectedAnswer: 'no' }),
        this.props.answer('no')
      );
    } else if (answer === 'yes' && !(typeof this.props.selected === 'string')) {
      this.setState({ showModal: true });
    } else {
      const { modalOptions } = this.state;
      this.setState({ selectedAnswer: answer.values });
      const options = { ...modalOptions };
      Object.keys(options).forEach((key) => options[key] = false);
      this.setState({ modalOptions: options, selectedAnswer: 'no' });
      this.props.answer(options);
    }
  }

  toggleOffModal = () => this.setState({ showModal: false })

  answerFromModalOptions = (options) => {
    if (every(values(options), (o) => o === false)) return 'no';
    if (every(values(options), (o) => o === null)) return '';
    return 'yes';
  }

  render() {
    const { question } = this.props;
    return (
      <div className={'questionDiv'}>
        <h1 className={'questionHeading'}>{question}</h1>
        <div>
          <button
            className={
            this.state.selectedAnswer === 'no'
            ? 'answerButton selected'
            : 'answerButton'
            }
            onClick={() => { this.setAnswer('no'); }}
          >
            NO
          </button>
          <button
            className={
            this.state.selectedAnswer === 'yes' || (this.state.modalOptions && includes(this.state.modalOptions, true))
            ? 'answerButton selected'
            : 'answerButton'
            }
            onClick={() => { this.setAnswer('yes'); }}
          >
            YES
          </button>
        </div>
        <Modal isOpen={this.state.showModal} toggle={this.toggleOffModal} className={'optionsModal tt-modal'}>
          <ModalHeader className={'modalHeader'} toggle={this.toggleOffModal}>{this.props.modalTitle}</ModalHeader>
          <ModalBody>
            <div className={'modalRows'}>{this.getModalRows()}</div>
          </ModalBody>
          <ModalFooter className={'modalFooter'}>
            <button className={'trackerSaveButton'} onClick={this.toggleOffModal}>Save</button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

BooleanQuestion.propTypes = {
  modalTitle: PropTypes.string,
  answer: PropTypes.func.isRequired,  // Send selected answer to the parent
  question: PropTypes.string.isRequired,
  selected: PropTypes.any,  //  Options or selected answer.
};

export default BooleanQuestion;

我想通过道具和this.state传递我选择的值而不是“ True”

0 个答案: