Как визуализировать части рендера в зависимости от реквизита reactjs - PullRequest
Новая
       54

Как визуализировать части рендера в зависимости от реквизита reactjs

2 голосов
/ 12 апреля 2020

Я пытаюсь использовать переключатель при рендеринге частей формы, однако, когда я делаю это, я получаю ошибку e неопределенного значения, и когда я console.log prop inputType, я получаю 3 undefined и фактическое значение. Я был бы признателен, если бы знал, что я делаю неправильно.

Это рендеры, которые я пытаюсь сделать, чтобы переключиться на 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Input from '../InputField';
import MultipleInput from '../multipleInput';
import ImageUploader from '../ImageUploader';
import './styles.scss';

const InputMultiple = ({currentState, handleMultpleChange, removeItem})=> (
  <MultipleInput
    value={currentState.services}
    name="services"
    handleMultpleChange={() => handleMultpleChange}
    removeItem={removeItem}
  />
);

const InputImageUploader = ({ setTheState, currentState }) => (
  <ImageUploader
    setState={setTheState}
    urls={currentState.urls}
    files={currentState.files}
    isDragging={currentState.isDragging}
  />
);

const InputTextArea = ({OnChange})=>(
  <div className="accommodation_popup_innerContainer_inputContainer_div1">
    <textarea
      type="text"
      name="description"
      id="description"
      className="input accommodation_popup_innerContainer_inputContainer_div1_inputs"
      onChange={OnChange}
    />
  </div>
);

const InputSingle = ({OnChange})=>(
    <div className="accommodation_popup_innerContainer_inputContainer_div1">
        <Input
            type="text"
            name={name}
            id={labelName}
            className="input accommodation_popup_innerContainer_inputContainer_div1_inputs"
            onChange={OnChange}
        />
  </div>
);

Это переключатель, и все реквизиты переданы вдоль него. 


const TypeOfInput = (inputType) => {
  console.log(inputType);
  switch (inputType) {
    case 'InputMultiple': {
      return InputMultiple;
    }
    case 'InputImageUploader': {
      return InputImageUploader;
    }
    case 'InputTextArea': {
      return InputTextArea;
    }

    default: {
      return InputSingle;
    }
  }
};

const LabelInput = ({
  labelName,
  inputType,
  name,
  OnChange,
  currentState,
  setTheState,
  handleMultpleChange,
  removeItem,
}) => (
  <div>
    <div className="accommodation_popup_innerContainer_inputContainer_text">
      <label className="accommodation_popup_innerContainer_inputContainer_text_texts">
        {labelName}
      </label>
    </div>
    {TypeOfInput(
      inputType,
      name,
      OnChange,
      currentState,
      setTheState,
      handleMultpleChange,
      removeItem
    )}
  </div>
);

LabelInput.propTypes = {
  labelName: PropTypes.string.isRequired,
  onChange: PropTypes.func,
};

export default LabelInput;

, где я вызываю компонент 

<LabelInput
   labelName="Services"
   name="services"
   inputType="InputMultiple"
   OnChange={this.handleChange}
   handleMultpleChange={() => this.handleMultpleChange}
   removeItem={this.removeItem}
/>

1 Ответ

1 голос
/ 12 апреля 2020

Эта строка handleMultpleChange={() => this.handleMultpleChange} в ваших LabelInput И MultipleInput компонентах неверна.

Вам необходимо либо вызвать функцию в этом обратном вызове следующим образом: () => this.handleMultpleChange() или установите функцию равной this.handleMultpleChange. Я обычно предпочитаю последнее, так как оно короче.

Так сделайте это: 

handleMultpleChange={() => this.handleMultpleChange()}

ИЛИ: 

handleMultpleChange={this.handleMultpleChange}

* PS: оно пишется multiple не multple

...