时间戳

首页 > 解决方案 > 将“输入”键事件转换为空字符串或反应中的空值

javascript - 将“输入”键事件转换为空字符串或反应中的空值

问题描述

如何在反应中将“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>
      </>
   )
}

在文本区域输入值并单击提交按钮后，我的输出如下所示：

嗨↵我是人类

所需输出：

你好我是人类

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

标签： javascriptreactjskeyboardevent-handlingkeycode

解决方案

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

编辑：你问题的第二部分并不像我想的那样容易，而且我们的逻辑完全不起作用，所以你可以看到我们应该使用addEventListeneron keyup，然后使用来自事件的信息，我们可以将字符添加到我们的输入中。

奖励：单击按钮后，我确实使用 ref 在 Textarea 内聚焦Enter以获得更好的用户体验！

class App extends React.Component {
  state = {
     ip: ''
  };
  inputRef = React.createRef()
  componentDidMount(){
     document.addEventListener("keyup", this.keyboardUp);
  }
  componentWillUnmount() {
      document.removeEventListener("keyup", this.keyboardUp);
  }
  keyboardUp = (e) => {
    if (e.key === 'Enter' || e.keyCode === 13) {
        e.preventDefault()
        console.log(e.key)
        this.setState(prev => ({ ip: prev.ip + ' ' })); 
    }else{
        this.setState(prev => ({ ip: prev.ip + e.key })); 
    }
  }
  enterHandler = () => {
      this.setState(prev => ({ ip: prev.ip + '\n' })); 
      this.inputRef.current.focus();
  }
  render() {
     return(
         <div>
           <textarea
            ref={this.inputRef}
            placeholder='Enter here'
            value={this.state.ip}
            />
            <button onClick={this.enterHandler}>Enter</button>
         </div>
     )
  }
}
ReactDOM.render(<App />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

推荐阅读