Textarea：如何在按下 ALT + ENTER 时允许换行？答案

【问题标题】：Textarea: How do I allow newline on ALT + ENTER pressed?Textarea：如何在按下 ALT + ENTER 时允许换行？
【发布时间】：2017-10-24 23:13:54
【问题描述】：

我正在使用 React 并且有一个 Textarea。我已经将一个动作绑定到 Enter ，这样它就不再创建换行符了。使用 SHIFT + ENTER 也不是一个选项。当我尝试使用 ALT + ENTER 时，它不起作用。 Stack Overflow textareas 也可以证明这一点。当我检测到 ALT + ENTER 时，有没有办法以编程方式触发 Enter 按下？

【问题讨论】：

标签： javascript reactjs textarea

【解决方案1】：

假设它是一个常规的 HTML 文本区域，使用 JavaScript，您可以使用以下 sn-p 以编程方式添加新行

var textarea = document.querySelector('#textarea');
textarea.value = textarea.value + "\r\n";

事件的完整示例如下所示

document.addEventListener('keydown', function(event) {
    if(event.altKey) {
       this.setState({
           altKey: true
       });
    }

    if((event.keyCode == 13 || event.which == 13) && this.state.altKey) {
        var textarea = document.querySelector('#textarea');
        textarea.value = textarea.value + "\r\n";
    }
});

document.addEventListener('keyup', function() {
       this.setState({
           altKey: false
       });
}

在这里，您可以在组件加载时将altKey 定义为您的状态中的false，并在componentDidMount() 中添加eventListener。

【讨论】：

【解决方案2】：

这是我的方式，我认为它很棒，我喜欢它，享受！

import React, { Component } from 'react';

export default class myComp extends Component {

    constructor(props) {
        super(props);
        let state = {msg_text:""};
        this.state                      =   state;
        this.handleChange               =   this.handleChange.bind(this);
        this.addNewLineToTextArea       =   this.addNewLineToTextArea.bind(this);
    }  

    onKeyPress = (e) => {
        if (e.keyCode === 13 && e.shiftKey) {
            e.preventDefault();
            this.addNewLineToTextArea();
        }
    };  


    addNewLineToTextArea(){
        let msg_text = this.state.msg_text+"\r\n";
        this.setState({msg_text: msg_text});
    }


    handleChange(funcArg) {
        let new_state = {};
        new_state[funcArg.name] = funcArg.event.target.value;
        this.setState(new_state);
        funcArg.event.target.setCustomValidity("");
    }

  render() {
        return (
             <div>
                  <textarea rows="3" placeholder="write..." onChange={(e) => 
                       this.handleChange({"event":e,"name":"msg_text"})} onKeyDown={this.onKeyPress} 
                       value={this.state.msg_text || ''}  >
                  </textarea> 
             </div>
            )}
        }

【讨论】：