在我的输入文本区域注释中想要 3 行而不是 1 行答案

【问题标题】：Want 3 rows in my input text area comments instead of one在我的输入文本区域注释中想要 3 行而不是 1 行
【发布时间】：2020-02-17 06:20:45
【问题描述】：

使用带有反应的 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")
    },

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

<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 但没有帮助，现在该怎么办？

【问题讨论】：

标签： javascript css reactjs sass bootstrap-4

【解决方案1】：

如果你不愿意使用 textarea，你可以使用 CSS 使输入元素的宽度和高度类似于文本区域。

一个好的做法是仅在这种情况下使用 textarea。在 React 中尝试像这样传递行和列：

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

PS：但这不会提供将文本换行到新行的功能。

谢谢

【讨论】：

【解决方案2】：

您应该能够通过以下方式使用 textarea 来实现所需的功能：

【讨论】：

我认为他正试图通过一些框架来实现它
@Farhan 将 4 作为字符串发送，如“4”
请检查@Mohit 的建议可能有帮助！
嗨@Farhan，这是工作代码：codesandbox.io/s/sad-wind-winy5，我已经创建了一个包含 3 行的文本区域，其中包含沙盒中的最少功能。

【解决方案3】：

对于多行输入，我认为您应该只使用

&lt;textarea cols="50" rows="3"&gt;Somethine like this &amp;#13;&amp;#10;for&amp;#13;&amp;#10;different lines&lt;/textarea&gt;

【讨论】：

我尝试了但没有解决我的解决方案，通过 rows: 4 没有工作
@Farhan 你的标题说你想要 3 行，但即使你想要 4 行它仍然有效<textarea cols="50" rows="4">Somethine like this &#13;&#10;for&#13;&#10;different lines&#13;&#10;and another one</textarea>

【解决方案4】：

我想知道您是否有任何原因不使用 textarea，因为我看到您正在使用输入元素。

【讨论】：

因为我们只为此使用输入
不幸的是，你不能用输入元素来做到这一点，正如@Michael所建议的那样，你必须使用你可以创建codesandbox或codepen以便我们为你提供帮助。
更新了问题，添加了输入组件 case 渲染位置
你使用哪个框架来响应 Bootstrap？
@Farhan 不太明白这个问题，也许沙盒会有很大帮助