随笔——文本域（计数方式：已输入/可再输入）

最新推荐文章于 2023-11-23 22:17:54 发布

懒人修

最新推荐文章于 2023-11-23 22:17:54 发布

阅读量803

点赞数

本文链接：https://blog.csdn.net/weixin_44268707/article/details/111478365

版权

随笔同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

react

13 篇文章 0 订阅

订阅专栏

ant design

5 篇文章 0 订阅

订阅专栏

样式：
.text-area_box {
      position: relative;
      .ant-input {
        height: 121px;
        background: #ffffff;
        border: 1px solid #d9d9d9;
        border-radius: 3px;
      }
      .word_number {
        position: absolute;
        bottom: -22px;
        right: 0;
        color: #bbbbbb;
        font-size: 14px;
      }
    }

文本域（计数方式：已输入/可再输入，ant design默认是已输入/总数，
使用ant design默认的那种需要在textarea加上showCount，也不需要再额外配置样式了）
<Form.Item name="remark" label="备注">
                <TextArea
                  ref={refTextArea1}
                  maxLength={maxLength1}
                  className="textArea"
                  onChange={handleChangeArea1}
                  value={descript}
                />
              </Form.Item>
              <span className="word_number">
                {count1} / {maxLength1 - count1 >= 0 ? maxLength1 - count1 : 0}
              </span>