Очистить и reset ввести поля ввода формы

У меня есть форма, содержащая различные поля ввода и две кнопки; один для отправки и один для отмены.

<form id="create-course-form">
  <input type="text" name="course_Name" ref="fieldName">
  <input type="text" name="course_org" ref="fieldOrg">
  <input type="text" name="course_Number" ref="fieldNum">

  <input type="submit" name="saveCourse" value="Create">
  <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse}>
</form>

Я хочу удалить все входы при нажатии кнопки отмены. До сих пор мне удалось это сделать, используя каждый вход ref.

cancelCourse(){
  this.refs.fieldName.value="";
  this.refs.fieldorg.value="";
  this.refs.fieldNum.value="";
}

Тем не менее, я хочу очистить поля ввода, не опуская каждый отдельно. Я хочу что-то подобное этому (jQuery): $('#create-course-form input[type=text]').val('');

Ответ 1

Ответ здесь зависит от того, контролируются или не контролируются ваши входы. Если вы не уверены или вам нужна дополнительная информация об этом, посмотрите, что говорят официальные документы контролируемые компоненты и неконтролируемые компоненты. Спасибо @Dan-Esparza за предоставление ссылок.

Также обратите внимание, что с использованием строковых литералов в ref устарел. Вместо этого используйте стандартный метод обратного вызова.

Очистка формы с неконтролируемыми полями

Вы можете очистить всю форму, а не каждое поле формы отдельно.

cancelCourse = () => { 
  document.getElementById("create-course-form").reset();
}

render() {
  return (
    <form id="create-course-form">
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

Если ваша форма не имеет атрибута id, вы можете использовать ref:

cancelCourse = () => { 
  this.myFormRef.reset();
}

render() {
  return (
    <form ref={(el) => this.myFormRef = el;}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}

Очистка формы с контролируемыми полями

Если вы используете контролируемые поля формы, вам может потребоваться явно reset каждый компонент внутри вашей формы, в зависимости от того, как ваши значения хранятся в состоянии.

Если они объявлены индивидуально, вам нужно reset каждый из них явно:

cancelCourse = () => { 
  this.setState({
    inputVal_1: "",
    inputVal_2: "",
    ...
    inputVal_n: "",
  });
}

render() {
  return (
    <input value={this.state.inputVal_1} onChange={this.handleInput1Change}>
    <input value={this.state.inputVal_2} onChange={this.handleInput2Change}>
    ...
    <input value={this.state.inputVal_n} onChange={this.handleInputnChange}>
  );
}

Демо ниже:

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      inputVal_1: "",
      inputVal_2: "",
      inputVal_3: "",
      inputVal_4: "",
      inputVal_5: "",
      inputVal_6: "",
      inputVal_7: "",
      inputVal_8: "",
      inputVal_9: "",
      inputVal_10: ""
    };
  }
  
  handleInput1Change = (e) => {
    this.setState({inputVal_1: e.target.value});
  }
  
  handleInput2Change = (e) => {
    this.setState({inputVal_2: e.target.value});
  }
  
  handleInput3Change = (e) => {
    this.setState({inputVal_3: e.target.value});
  }
  
  handleInput4Change = (e) => {
    this.setState({inputVal_4: e.target.value});
  }
  
  handleInput5Change = (e) => {
    this.setState({inputVal_5: e.target.value});
  }
  
  handleInput6Change = (e) => {
    this.setState({inputVal_6: e.target.value});
  }
  
  handleInput7Change = (e) => {
    this.setState({inputVal_7: e.target.value});
  }
  
  handleInput8Change = (e) => {
    this.setState({inputVal_8: e.target.value});
  }
  
  handleInput9Change = (e) => {
    this.setState({inputVal_9: e.target.value});
  }
  
  handleInput10Change = (e) => {
    this.setState({inputVal_10: e.target.value});
  }
  
  cancelCourse = () => { 
    this.setState({
      inputVal_1: "",
      inputVal_2: "",
      inputVal_3: "",
      inputVal_4: "",
      inputVal_5: "",
      inputVal_6: "",
      inputVal_7: "",
      inputVal_8: "",
      inputVal_9: "",
      inputVal_10: ""
    });
  }
  
  render() {
    return (
      <form>
        <input value={this.state.inputVal_1} onChange={this.handleInput1Change} />
        <input value={this.state.inputVal_2} onChange={this.handleInput2Change} />
        <input value={this.state.inputVal_3} onChange={this.handleInput3Change} />
        <input value={this.state.inputVal_4} onChange={this.handleInput4Change} />
        <input value={this.state.inputVal_5} onChange={this.handleInput5Change} />
        <input value={this.state.inputVal_6} onChange={this.handleInput6Change} />
        <input value={this.state.inputVal_7} onChange={this.handleInput7Change} />
        <input value={this.state.inputVal_8} onChange={this.handleInput8Change} />
        <input value={this.state.inputVal_9} onChange={this.handleInput9Change} />
        <input value={this.state.inputVal_10} onChange={this.handleInput10Change} />
        <input type="submit" name="saveCourse" value="Create" />
        <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse} />
      </form>
    );
  }
}

ReactDOM.render(<MyApp />, 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>

Ответ 2

Очень просто:

handleSubmit(e){
    e.preventDefault();
    e.target.reset();
}

<form onSubmit={this.handleSubmit.bind(this)}>
  ...
</form>

Ответ 3

Использование event.target.reset() работает только для неуправляемых компонентов, что не рекомендуется. Для контролируемых компонентов вы должны сделать что-то вроде этого:

import React, { Component } from 'react'

class MyForm extends Component {
  initialState = { name: '' }

  state = this.initialState

  handleFormReset = () => {
    this.setState(() => this.initialState)
  }

  render() {

    return (
      <form onReset={this.handleFormReset}>
        <div>
          <label htmlFor="name">Name</label>
          <input
            type="text"
            placeholder="Enter name"
            name="name"
            value={name}
            onChange={this.handleInputOnChange}
          />
        </div>
        <div>
          <input
            type="submit"
            value="Submit"
          />
          <input
            type="reset"
            value="Reset"
          />
        </div>
      </form>
    )
  }
}

ContactAdd.propTypes = {}

export default MyForm

Ответ 4

Следующий код должен reset форма за один клик.

import React, { Component } from 'react';

class App extends Component {
    constructor(props){
    	super(props);
    	this.handleSubmit=this.handleSubmit.bind(this);
    }
    handleSubmit(e){
    this.refs.form.reset();
    }
    render(){
        return(
        <div>
        	<form onSubmit={this.handleSubmit} ref="form">
                <input type="text" placeholder="First Name!" ref='firstName'/><br/<br/>
            	<input type="text" placeholder="Last Name!" ref='lastName'/><br/><br/>
                <button type="submit" >submit</button>
            </form>
       </div>
    }
}

Ответ 5

Чтобы очистить форму, допустив, что значения элементов формы сохранены в вашем состоянии, вы можете отобразить свое состояние следующим образом:

  // clear all your form
  Object.keys(this.state).map((key, index) => {
      this.setState({[key] : ""});
   });

Если ваша форма находится среди других полей, вы можете просто вставить их в определенное поле состояния следующим образом:

 state={ 
        form: {
        name:"",
        email:""}
      }

      // handle set in nested objects
      handleChange = (e) =>{ 
        e.preventDefault(); 

        const newState = Object.assign({}, this.state);
        newState.form[e.target.name] = e.target.value;
        this.setState(newState);
      }

      // submit and clear state in nested object 
      onSubmit = (e) =>{ 
        e.preventDefault(); 

       var form =   Object.assign({}, this.state.form);
       Object.keys(form).map((key, index) => {
          form[key] = "" ;
        });

       this.setState({form})
      }

Ответ 6

В моем случае после вызова e.preventDefault() e.target имеет значение null, и я не могу сбросить форму, поэтому я не могу сохранить ее в переменной, к которой легко получить доступ даже в обещании, если вы вызываете API.

handleSubmit(e){
    var form = e.target;
    e.preventDefault();

    form.reset();
}

<form onSubmit={this.handleSubmit}>
  ...
</form>

Ответ 7

Если после вызова e.preventDefault() возникла похожая проблема, для e.target задано значение null, и я не могу сбросить форму, поэтому я не могу сохранить ее в переменной, к которой легко получить доступ даже в обещании, если вы вызываете API.

handleSubmit(e){
    var form = e.target;
    e.preventDefault();

    form.reset();
}

<form onSubmit={this.handleSubmit}>
  ...
</form>

Ответ 8

Я не знаю, актуально ли это до сих пор. Но когда у меня возникла похожая проблема, я решил ее.

Если вам нужно очистить неконтролируемую форму, вы просто делаете это после подачи.

this.<ref-name-goes-here>.setState({value: ''});

Надеюсь это поможет.

Ответ 9

Вы также можете сделать это путем нацеливания на текущий ввод с помощью anything.target.reset(). Это самый простой способ!

handleSubmit(e){
 e.preventDefault();
 e.target.reset();
}

<form onSubmit={this.handleSubmit}>
  ...
</form>

Ответ 10

state={ 
  name:"",
  email:""
}

handalSubmit = () => {
  after api call 
  let resetFrom = {}
  fetch('url')
  .then(function(response) {
    if(response.success){
       resetFrom{
          name:"",
          email:""
      }
    }
  })
  this.setState({...resetFrom})
}