javascript - 在我的输入文本区域评论中想要 3 行而不是一行

Question

将 Bootstrap 4.3.1 与 React 结合使用目前，我有这个

我想实现这个

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")
    },

尝试在 commnet 中使用上述更改但没有帮助

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

这也是我的 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:但这不会提供将文本换行到新行的功能。

谢谢