Question

我在呈现表单的一部分时尝试使用开关，但是，当我这样做时，出现e的错误undefined，当我console.log 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}
/>

Answer 1

您的handleMultpleChange={() => this.handleMultpleChange} AND LabelInput组件中的这一行MultipleInput不正确。

您需要像这样在回调中调用函数：() => this.handleMultpleChange()或将函数设置为this.handleMultpleChange。我通常更喜欢后者，因为它更短。

这样做：

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

OR：

handleMultpleChange={this.handleMultpleChange}

* PS：它的拼写是multiple，而不是multple

如何根据道具reactjs渲染部分渲染

1 个答案: