Javascript 在css中向文本框添加文本时遇到问题

我试图创建一个简单的文本框内的文本。我在网上查过，但没什么效果。这是我的TextBox.css文件

div.TextBox {
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}

.TextBox-input {}

这是我的TextBox.js文件

import React, { PropTypes } from 'react';
import withStyles from '../../decorators/withStyles';
import styles from './TextBox.css';

@withStyles(styles)
class TextBox {

  static propTypes = {
    maxLines: PropTypes.number
  };

  static defaultProps = {
    maxLines: 1
  };

  render() {
    return (
      <div className="TextBox">
        {this.props.maxLines > 1 ?
          <textarea {...this.props} className="TextBox-input" ref="input" key="input" rows={this.props.maxLines} /> :
          <input {...this.props} className="TextBox-input" ref="input" key="input" />}
      </div>
    );
  }

}

export default TextBox;

import React，{PropTypes}来自'React'；
从“../../decorators/with样式”导入with样式；
从“./TextBox.css”导入样式；
@样式（样式）
类文本框{
静态类型={
maxLines:PropTypes.number
};
静态defaultProps={
最大行数：1
};
render（）{
返回(
{this.props.maxLines>1？
:
}
);
}
}
导出默认文本框；

您的CSS有点失控。由于某种原因，您两次指定了

位置

，但我并不清楚您想要实现什么。你能详细说明一下吗

不管怎样，我认为您的问题在于您使用的是

位置：绝对值

，并且您没有指定宽度或高度。尝试添加

宽度：100%

，

高度：100%

，您至少可以在屏幕上看到一些东西

您并不总是需要宽度和高度，但由于绝对定位将元素从页面的正常流程中移除，因此浏览器需要了解在何处绘制元素。有时，您希望图元占用所有可用空间，可以通过将所有四边指定为

0

来“拉伸”图元：

top: 0;
bottom: 0;
left: 0;
right: 0;

---

你的问题不是很清楚。首先，如果您试图通过CSS将“文本”添加到文本框中，您不能，CSS用于设置HTML元素的样式

使用类似jQuery的工具，您可以生成具有指定文本的文本框，下面是一个示例：

用户可以在文本字段中输入内容，然后按“添加文本框” 它将添加文本区域元素，并将该文本作为值

 $('.add_button').on('click', function(e){
    //When user clicks "add textbox" ensure they have added text.
    if(!$('.add_text').val().length){
        $('.error').show();
    }
    //If there is text, append textbox with text to results div.
    else{
        //Hide error message
        $('.error').hide();

        $('.results').append('<textarea class="textbox">' + $('.add_text').val() + '</textarea>')
    }
});

$（'.add_按钮'）。在（'click'，函数（e）上{
//当用户单击“添加文本框”时，确保他们已添加文本。
如果（！$（'.add_text'）.val（）.length）{
$（'.error'）.show（）；
}
//如果有文本，则将文本框与文本一起附加到results div。
否则{
//隐藏错误消息
$（'.error'）.hide（）；
$（'.results'）.append（'+$（'.add_text'）.val（）+''）
}
});

---

同样，不确定您具体要求什么，但希望这能帮助您走上正确的道路？

您试图通过CSS添加文本？