Question

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

Answer 1

假设它是常规的HTML textarea，使用JavaScript您可以使用以下代码段以编程方式添加新行

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内添加eventListener时，您可以在此处将false定义为componentDidMount()。

Answer 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>
            )}
        }

Textarea：如何在ALT + ENTER上按下换行符？

2 个答案: