控制textarea是否自动换行

            <TextArea
              value={this.state.textAreaValue}
              placeholder="请输入要查询的手机号。(一行一条,最多100条,以回车键换行)"
              resize="none"
              onChange={this.textAreaChange}
            />

当用户输入一行超过40个字符的时候,它就会自动换行,但我只希望按了回车键后才换行,不按回车永远不换行

解决方案:

1、添加white-space:nowrap; 

2、给textarea加上wrap="off" (firefox 下得用wrap="off")

<textarea wrap="off" style="white-space:nowrap; overflow-x:scroll; overflow-y:hidden;"></textarea>

最终代码:

            <TextArea
              value={this.state.textAreaValue}
              placeholder="请输入要查询的手机号。(一行一条,最多100条,以回车键换行)"
              resize="none"
              wrap={this.state.textAreaValue?'off':'on'}
              style={{whiteSpace: this.state.textAreaValue? 'noWrap': ''}}
              onChange={this.textAreaChange}
            />

 

posted @ 2021-08-02 10:45  rachelch  阅读(626)  评论(0编辑  收藏  举报