Хотите 3 строки в моих комментариях области ввода текста вместо одной

Question

Использование Bootstrap 4.3.1 с реакции В настоящее время у меня есть это

И я хочу добиться этого

comments: {
        elementLabel: "Comments",
        elementType: 'textarea',
        elementConfig: {
            placeholder: '',
            name: "comments",
            id: "comments",
            rows: 4
        },
        value: '',
        form_value: "",
        validation: {
        },
        valid: false,
        touched: false,
        isChanged: false,
        errorMessage: "",
        className: "form-control",
        changed: (event) => this.inputChangedHandler(event, "comments"),
        blured: (event) => this.inputBlurHandler(event, "comments")
    },

Пробовал использовать вышеуказанные изменения в комнете, но это не помогает

<div className="form-row mb-3">
                                    <div className="col-md-12">
                                            <Input
                                                {...this.state.comments}
                                            />  </div>
                                </div>

Также это касается компонента My input, где textarea получает рендер.

 case ('textarea'):
        inputElement = (
            <React.Fragment>
                <label>{ReactHtmlParser(props.elementLabel)}</label>
                <textarea
                    {...props.elementConfig}
                    className={inputClass}
                    value={props.value}
                    onChange={props.changed}
                    onBlur={props.blured}
                />
                {
                    invalidClass || props.allowed_characters
                        ?
                        <div className="form-row">
                            <div className={`col-md-10  text-left`}>
                                {invalidClass ? <span className="invalid-feedback">{props.errorMessage}</span> : null}
                            </div>
                            <div className="col-md-2 text-right">
                                {
                                    props.allowed_characters ?
                                        <span className="allowed_characters">{props.current_character_count} / {props.allowed_characters}</span>
                                        : null
                                }
                            </div>
                        </div>
                        :
                        null
                }

            </React.Fragment>
        )

Пробовал проходить внешние scss но это не помогает, что теперь делать?

Answer 1

Если вы не хотите использовать текстовую область, вы можете использовать CSS, чтобы сделать ширину и высоту элемента ввода подобными текстовой области.

Хорошей практикой является использование текстовой области только для таких случаев. В React попробуйте передать строки и столбцы следующим образом:

<textarea rows={4} cols={8} />

PS: но это не даст возможности переноса текста на новую строку.

Спасибо

Answer 2

Для многострочного ввода, я думаю, вы должны просто использовать

<textarea cols="50" rows="3">Somethine like this &#13;&#10;for&#13;&#10;different lines</textarea>

Answer 3

Вы можете достичь желаемой функциональности, используя textarea следующим образом:

Answer 4

Я хочу знать, есть ли какая-либо причина, по которой вы не используете textarea, потому что я вижу, что вы используете элемент ввода.