在反应中将“Enter”键事件转换为空字符串或null

编程问答 2022-05-29

问题描述

如何在react中将'Enter'键事件转换为空格或空字符串(' ')？

this.state = {
   ip: ''
};

inputChange = (e) => {  
      this.setState({ ip: e.target.value });   
};

render() {
   return(
      <>
       <textarea              
        onChange={this.inputChange}
        value={this.state.ip}
        placeholder='Enter here'
        ></textarea>
        <button>Enter</button>
      </>
   )
}

在文本区域输入值并点击提交按钮后，我的输出是这样的：

嗨↵我是人类

所需输出：

嗨，我是人类

编辑：如果我们点击回车，它应该转到文本区域的下一行。

解决方法

您可以在问题的第一部分使用 Regex 和 .replace。

编辑：你问题的第二部分并不像我想象的那么容易，而且我们的逻辑完全不起作用，所以你可以看到我们应该在 {{ 1}}，然后根据事件的信息，我们可以在输入中添加字符。

奖励：为了更好的用户体验，我确实在点击 addEventListener 按钮后使用 ref 在 Textarea 内聚焦！

keyup
Enter

event-handlingjavascriptkeyboardkeyboardreactjsreactjsreactjsreactjs