我在React中构建了一个聊天组件,并且无法在按下回车键后弄清楚如何清除textarea元素。该组件是无状态的,并且没有与textarea相关联的道具,因此它永远不会被重新渲染。
sendMessage(e) {
if (e.key === 'Enter') {
this.props.onKeyUp(e.target.value)
// I want to clear the textarea around here
}
}
render() {
return(
...
<textarea onKeyUp={this.sendMessage}></textarea>
...
答案 0 :(得分:2)
constructor(props){
this.state({value:""})
}
sendMessage(e) {
if (e.key === 'Enter') {
this.props.onKeyUp(e.target.value)
// I want to clear the textarea around here
this.setState({value:""})
}
}
handleChange=(e)=>{
this.setState({value :e.target.value})
}
render() {
return <textarea value={this.state.value} onChange={this.handleChange} onKeyUp = {this.sendMessage}></textarea>
}
答案 1 :(得分:0)
有效的答案被删除了,基本上它说使用refs:https://facebook.github.io/react/docs/refs-and-the-dom.html
答案 2 :(得分:0)
在完成工作后,只需清除value
target
。
e.target.value = "";
示例:
class Test extends React.Component {
sendMessage(e) {
if (e.key === 'Enter') {
//this.props.onKeyUp(e.target.value) your work with value
// I want to clear the textarea around here
e.target.value = "";
}
}
render() {
return <textarea onKeyUp = {this.sendMessage}></textarea>
}
}
ReactDOM.render(<Test/>, document.getElementById("root"));
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
&#13;