时间戳

首页 > 解决方案 > 在 React 中更改 html 字符串中文本框的大小

html - 在 React 中更改 html 字符串中文本框的大小

问题描述

我正在使用弹出库 sweetalert2-react-content 来生成一个弹出框，其中包含一个文本框和一个文本区域。在弹出框中，我正在生成一个 html 字符串来创建文本框和文本区域。它可以很好地生成这些元素，但是我无法更改文本区域的大小。这是一个代码片段：

import React, { Component } from 'react';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';

submitButton() {

    const MySwal = withReactContent(Swal)

    MySwal.fire({
        confirmButtonText: 'Submit Post',
        showCancelButton: true,
        title: "Submit a new Post",
        html:
            '<br /><br />' +
            '<h4>Enter the title</h4>' +
            '<input type="text" id="theTitle">' +
            '<h4>Enter the body</h4>' +
            '<textarea rows="10" cols="50"></textarea>',
        input: 'file',
        focusConfirm: false,
      }).then(result => this.getPostValues(result.value))
    }

有什么想法可以让文本框显示得更大一点吗？谢谢！！

标签： htmlreactjs

解决方案

很可能是通过库的 css 控制的<textarea>，所以即使你设置了rowsand cols，css 也会决定样式。如果是这样，您将不得不编辑库的 css，用您自己的 css 覆盖它，或者给它一个 inline style。

MySwal.fire({
    // Other settings...
    html:
        '...other html' +
       '<textarea style="height: 200px; width: 400px"></textarea>'
});

推荐阅读