在 react 中'Enter'键事件转换为空字符串或 null

Question

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

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

嗨↵我人类

要求输出:

Hi I'm Human

编辑:如果我们按回车键，它会移到文本区的下一行。

Answer 1

你可以用Regex和。replace来代替问题的第一部分。

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

:我在点击Enter按钮后使用ref在文本区域内聚焦，以获得更好的用户体验!

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>