Question

提交后，我无法删除文本区域内的文本

我尝试过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>
`

预期结果是提交后看到字段值为空，但是我得到的结果是文本区域中仍然有文本，但值为空

Answer 1

我看到您在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将为空

Answer 2

提交时，您更改状态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 :''});
        })

提交React JS后如何删除文本区域内的文本

2 个答案: