提交后,我无法删除文本区域内的文本
我尝试过setState(),但是它不会删除文本,只会删除值
handleSubmit(evt){
evt.preventDefault();
console.log(this.state);
// const data = {
// email:this.state.email,
// subject:this.state.subject,
// body:this.state.body,
// }
const url = 'http://localhost:5000/api/nodemailer';
axios.post( url, this.state)
.then((res)=> {
console.log(res);
this.setState({email:'',subject:'',body:''});
})
.catch(err => {console.log('not sent'+err)});
`
<div className="row">
<div className="input-field col s12">
<i className="material-icons prefix">mode_edit</i>
<textarea id={this.props.name} className="materialize-textarea" name={this.props.name} value={this.props.body} onChange={this.props.onChange} placeholder={this.props.body} ></textarea>
<label htmlFor={this.props.name}>{this.props.title}</label>
</div>
</div>
`
预期结果是提交后看到字段值为空,但是我得到的结果是文本区域中仍然有文本,但值为空
答案 0 :(得分:0)
我看到您在textarea上具有onChange
功能,但是您没有设置文本,因此您的组件不受react控制。您应该执行以下操作:
<textarea
id={this.props.name}
className="materialize-textarea"
name={this.props.name}
value={this.props.body}
onChange={this.props.onChange}
placeholder={this.props.body}
>
{this.props.body}
</textarea>
这样,当您setState()
并重置this.props.body
值时,textarea
将为空
答案 1 :(得分:0)
提交时,您更改状态this.setState({email:'',subject:'',body:''});
但是,文本区域没有value= this.state.body
,而是value={this.props.body}
所以尝试这个:
<div className="row">
<div className="input-field col s12">
<i className="material-icons prefix">mode_edit</i>
<textarea id={this.props.name} className="materialize-textarea" name={this.props.name} value={this.state.bodyState} onChange={this.props.onChange} placeholder={this.state.bodyState} ></textarea>
<label htmlFor={this.props.name}>{this.props.title}</label>
</div>
</div>
this.setState({bodyState = this.props.value)};
const url = 'http://localhost:5000/api/nodemailer';
axios.post( url, this.state)
.then((res)=> {
console.log(res);
this.setState({bodyState :''});
})