清除并重置表单输入字段

时间：2017-05-11 17:54:42

标签： reactjs

我有一个包含各种输入字段和两个按钮的表单;一个用于提交，一个用于取消。

<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 prop。

来完成此操作 
cancelCourse(){
  this.refs.fieldName.value="";
  this.refs.fieldorg.value="";
  this.refs.fieldNum.value="";
}

但是，我想清空输入字段而不必单独清空每个输入字段。我想要类似于此的东西（jQuery）：$('#create-course-form input[type=text]').val('');

16 个答案:

答案 0 :(得分：47)

此处的答案取决于您的输入是受控还是不受控制。如果您不确定或需要更多相关信息，请查看官方文档对controlled components和uncontrolled components的说明。 感谢 @ Dan-Esparza 提供链接。

另请注意using string literals in ref is deprecated。请改用标准回调方法。

清除包含不受控制字段的表单

您可以单独清除整个表单而不是每个表单字段。

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>
  );
}

清除带有受控字段的表单

如果您使用受控表单字段，则可能必须显式重置表单中的每个组件，具体取决于您的值在状态中的存储方式。

如果单独声明它们，则需要明确重置每个：

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>

虽然有一种更清洁的方法。而不是拥有n状态属性和n事件处理程序，每个输入一个，通过一些聪明的编码，我们可以大大减少代码。

在构造函数中，我们只声明一个空对象，它将用于保存输入值。我们只使用一个输入处理程序并将其传递给我们想要更改其值的输入元素的索引。这意味着我们开始输入单个输入的值就会生成。

要重置表单，我们只需要将输入对象重新设置为空。

输入值为this.state.inputVal[i]。如果i不存在（我们还没有在该输入中输入任何内容），我们希望该值为空字符串（而不是null）。

cancelCourse = () => { 
  this.setState({inputVal: {}});
}

render() {
  return (
    <form>
      {[...Array(n)].map(
        (item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} />
      )}
    </form>
  );
}

演示如下： 

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      inputVal: {}
    };
  }
  
  handleInputChange = (idx, {target}) => {
    this.setState(({inputVal}) => {
      inputVal[idx] = target.value;
      return inputVal;
    });
  }
  
  cancelCourse = () => { 
    this.setState({inputVal: {}});
  }
  
  render() {
    return(
      <form>
        {[...Array(10)].map(  //create an array with a length of 10
          (item, i) => <input value={this.state.inputVal[i] || ""} onChange={this.handleInputChange.bind(this, i)} />  //bind the index to the input handler
        )}
        <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>

答案 1 :(得分：30)

非常简单：

＆＃13;
＆＃13; 
handleSubmit(e){
    e.preventDefault();
    e.target.reset();
}
＆＃13; 
<form onSubmit={this.handleSubmit.bind(this)}>
  ...
</form>
＆＃13;
＆＃13;
＆＃13;

祝你好运：）

答案 2 :(得分：4)

使用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

答案 3 :(得分：1)

以下代码应该只需点击一下即可重置表单。

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>
    }
}

答案 4 :(得分：1)

此方法最适合重置表单。 

import React, { Component } from 'react'
class MyComponent extends Component {
  constructor(props){
    super(props)
    this.state = {
      inputVal: props.inputValue
    }
    // preserve the initial state in a new object
    this.baseState = this.state ///>>>>>>>>> note this one.
  }
  resetForm = () => {
    this.setState(this.baseState) ///>>>>>>>>> note this one.
  }
  submitForm = () => {
    // submit the form logic
  }
  updateInput = val => this.setState({ inputVal: val })
  render() {
    return (
      <form>
        <input
          onChange={this.updateInput}
          type="text
          value={this.state.inputVal} />
        <button
          onClick={this.resetForm}
          type="button">Cancel</button>
        <button
          onClick={this.submitForm}
          type="submit">Submit</button>
      </form>
    )
  }
}

答案 5 :(得分：0)

要清除表单（承认表单的元素值保存在您的状态中），您可以这样映射整个状态：

  // 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 :(得分：0)

在我的情况下，在调用e.preventDefault（）之后，e.target设置为null，并且我无法重置该表单，因此要避免我将其存储在一个变量中，即使在调用时，即使在promise中也可以轻松访问API。

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

    form.reset();
}

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

答案 7 :(得分：0)

在调用e.preventDefault（）之后出现了类似的问题e.target设置为null并且我无法重置该表单，因此避免了将其存储在一个变量中，即使在调用时，即使在promise中也可以轻松访问该变量API。

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

    form.reset();
}

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

答案 8 :(得分：0)

我不知道这是否仍然有意义。但是，当我遇到类似的问题时，这就是我的解决方法。

需要清除不受控制的表单时，只需在提交后执行此操作即可。

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

希望这会有所帮助。

答案 9 :(得分：0)

您也可以使用anything.target.reset()来定位当前输入。这是最简单的方法！

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

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

答案 10 :(得分：0)

import React, { Component } from 'react'

export default class Form extends Component {
  constructor(props) {
    super(props)
    this.formRef = React.createRef()
    this.state = {
      email: '',
      loading: false,
      eror: null
    }
  }

  reset = () => {
    this.formRef.current.reset()
  }

  render() {
    return (
      <div>
        <form>
          <input type="email" name="" id=""/>
          <button type="submit">Submit</button>
          <button onClick={()=>this.reset()}>Reset</button>
        </form>
      </div>
    )
  }
}

答案 11 :(得分：0)

/ * 请参见 newState 并将其用于 eventSubmit（） 中，以重置所有状态。 我已经测试过它对我有用。请让我知道错误 * / 

import React from 'react';
    
    const newState = {
        fullname: '',
        email: ''
    }
    
    class Form extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                fullname: ' ',
                email: ' '
            }
    
            this.eventChange = this
                .eventChange
                .bind(this);
            this.eventSubmit = this
                .eventSubmit
                .bind(this);
        }
        eventChange(event) {
            const target = event.target;
            const value = target.type === 'checkbox'
                ? target.type
                : target.value;
            const name = target.name;
    
            this.setState({[name]: value})
        }
    
        eventSubmit(event) {
            alert(JSON.stringify(this.state))
            event.preventDefault();
            this.setState({...newState});
        }
    
        render() {
            return (
                <div className="container">
                    <form className="row mt-5" onSubmit={this.eventSubmit}>
                        <label className="col-md-12">
                            Full Name
                            <input
                                type="text"
                                name="fullname"
                                id="fullname"
                                value={this.state.fullname}
                                onChange={this.eventChange}/>
                        </label>
                        <label className="col-md-12">
                            email
                            <input
                                type="text"
                                name="email"
                                id="email"
                                value={this.state.value}
                                onChange={this.eventChange}/>
                        </label>
                        <input type="submit" value="Submit"/>
                    </form>
                </div>
            )
        }
    }
    
    export default Form;

答案 12 :(得分：0)

提交表单后，'event' 将作为参数传递给 handleSubmit 方法，如果这样，您可以通过键入 <form> 访问 event.target 元素。那么您只需要使用 .reset() 表单方法重置表单即可。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

  handleSubmit = (event)=>{
    event.preventDefault()
    ....

    event.target.reset()
  }

  render() {
    return (
      <>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor='movieTitle'>Title</label>
          <input name='movieTitle' id='movieTitle' type='text' />

          <input type='submit' value='Find Movie Info' />
        </form>
      </>
    )
  }

答案 13 :(得分：-1)

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

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

答案 14 :(得分：-1)

为什么不使用HTML控制的项目，例如<input type="reset">

答案 15 :(得分：-1)

最简单的方法是仅使用 HTML 定期执行此操作，并使用“重置”按钮类型，根本不需要在 React 中处理任何事情，没有状态，什么也没有。

import React, {useState} from 'react'

function HowReactWorks() {
  
  return (
    <div>
      <form>
        <div>
          <label for="name">Name</label>
          <input type="text" id="name" placeholder="name" />
        </div>
        <div>
          <label for="password">Password</label>
          <input type="password" id="password" placeholder="password" />
        </div>
        <button type="reset">Reset</button>
        <button>Submit</button>
      </form>
    </div>
  )
}

export default HowReactWorks
  • 为不知道如何在 React 中包含 HTML 的人编辑
相关问题
最新问题