我想在输入按键反应后清除textarea内容。但是,当输入键时,文本区域清除但输入键保持不变(换行)。我怎样才能解决这个问题?
constructor(){
this.state = { text : '' }
}
keypress(e){
if(e.key == 'Enter'){
this.setState({
send_message: ''
})
}
}
<textarea value={this.state.text} placeholder="Text" rows="1" className="form-textarea typing-area" onKeyPress={this.keypress.bind(this)}></textarea>
当键为'Enter'时,您可以使用event.preventDefault
:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { text : '' }
this.handleChange = this.handleChange.bind(this);
this.keypress = this.keypress.bind(this);
}
handleChange(event) {
this.setState({text: event.target.value});
}
keypress(e){
if(e.key === 'Enter'){
e.preventDefault();
this.setState({
send_message: this.state.text,
text: '',
});
}
}
render() {
return (
<div>
<textarea
value={this.state.text}
placeholder="Text"
rows="1"
className="form-textarea typing-area"
onChange={this.handleChange}
onKeyPress={this.keypress}
/>
<pre>{JSON.stringify(this.state, null, 2)}</pre>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<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="app"></div>
假设此文本区域供您的用户发表评论。我将我的文本区域放在一个表单元素和onSubmit
中,并在你的渲染上方定义一个handleSubmit
函数:
handleChange = (event) => {
this.setState({ comment: event.target.value });
};
handleSubmit = (event) => {
event.preventDefault();
this.setState({ comment: '' });
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<h4>Add a Comment</h4>
<textarea onChange={this.handleChange} value={this.state.comment} />
<div>
<button>Submit Comment</button>
</div>
</form>
);
}
请注意,在handleSubmit
中我添加了e.preventDefault()
,因为它是一个表单元素,HTML表单元素的默认行为是提交。然后我添加了一个带有comment属性和值为空字符串的对象的this.setState()
,以便您的文本区域可以清空。在你的情况下,你可以称之为{ text: '' }
。
注意我还有一个onChange
事件处理程序与{this.handleChange}
。 handleChange
收到这个event
对象,你的text
州的新值或在我的情况下comment
州将来自event.target.value
。
在开发这个组件时,我也会在整个过程中对其进行测试。因此,请考虑一个测试,该测试找到textarea元素,模拟更改事件,提供虚假事件对象,强制组件更新,然后断言文本区域确实已更改其值。在这样的测试中,您需要手动设置event.target.value
值。