Как включить поле textarea при определении модели формы обратной связи в веб-приложении реагирования

Question

Я пытаюсь описать модель для связи с нами.Эта форма будет иметь два текстовых поля и одно поле textarea, которое будет использоваться для сообщения.Я определил поле сообщения как type: "textarea", но когда оно отображается, оно отображается как обычное текстовое поле.Кто-нибудь может подсказать, как определить здесь поле textarea?

Это просто для связи с нами в реагирующих.

  <DynamicForm className="contactform"
  title = "Contact us"
  model = {[
    {key: "name", label: "Name", props: {required:true}},
    {key: "email", label: "E-mail", type:"email"},
    {key: "message", label: "Message", type: "textarea" }
  ]}
  onSubmit = {(model) => {this.onSubmit(model)}}

  />

Я ожидаю, что текстовая область будет отображаться, когда я приведу тип как текстовую область в приведенном выше коде.

Здесь определена динамическая форма:

'' '

import React from 'react';
import './contact.css';

export default class DynamicForm extends React.Component {
state = {
}
constructor(props) {
    super(props);
}

onSubmit = (e) => {
    e.preventDefault();
    if (this.props.onSubmit) this.props.onSubmit(this.state);
}

onChange = (e, key) => {
    this.setState({
        [key]: this[key]
    })

}

renderForm = () => {
    let model = this.props.model;
    let formUI = model.map((m) => {
        let key = m.key;
        let type = m.type || "text";
        let props = m.props || {};
        return (
            <div key={key} className="form-group">
                <label className="formlabel"
                    key={"l" + m.key}
                    htmlFor={m.key}>
                    {m.label}
                </label>
                <input {...props}
                    ref={(key) => { this[m.key] = key }}
                    className="form-input"
                    type={type}
                    key={"i" + m.key}
                    onChange={(e) => { this.onChange(e, key) }}
                >
                </input>
            </div>
        )
    });
    return formUI;
}

render() {
    let title = this.props.title || "Dynamic Contact Us Form";
    return (
        <div className={this.props.className}>
            <h3>{title}</h3>
            <form className="dynamic-form" onSubmit={(e) => this.onSubmit(e)}>
                <div className="form-group">
                    {this.renderForm()}
                    <button type="submit">Submit</button>
                </div>


            </form>
        </div>
    )
}
} 

'' '

Answer 1

textarea - это недопустимый тип типа input.

Вместо этого следует использовать элемент textarea HTML .

Вот что может сработать:

renderForm = () => {
    let model = this.props.model;
    let formUI = model.map((m) => {
        let key = m.key;
        let type = m.type || "text";
        let props = m.props || {};
        return (
            <div key={key} className="form-group">
                <label className="formlabel"
                    key={"l" + m.key}
                    htmlFor={m.key}>
                    {m.label}
                </label>
                {type === "textarea" ? 
                  (<textarea [Add here the textarea props]>)
                :
                  (<input {...props}
                    ref={(key) => { this[m.key] = key }}
                    className="form-input"
                    type={type}
                    key={"i" + m.key}
                    onChange={(e) => { this.onChange(e, key) }}
                  >)}
                </input>
            </div>
        )
    });
    return formUI;
}