清除和重置表单输入字段

IT技术 reactjs
2021-04-12 02:38:47

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

<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('');

6个回答

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

另外，请注意，不推荐使用字符串字面量ref。请改用标准回调方法。

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

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

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

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

如果您的表单没有id属性，您也可以使用 a 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}>
  );
}

演示如下：

Show code snippet

不过，有一种更简洁的方法可以做到这一点。与其拥有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>
  );
}

演示如下：

Show code snippet

对于想知道什么是“受控”和“非受控字段”的未来读者，请查看React 主页上有关使用表单的文档。
2021-05-28 02:38:47
@yokodev，不太关注。请考虑发布一个新问题并在那里发布更多信息。还要声明你已经阅读了这个问题，但你仍然不理解 X 和 Y。同时给我一个链接，我会检查它。
2021-05-29 02:38:47
感谢您的回答，我正在使用不受控制的文件，所以我使用了 reset() 函数，它现在就像一个魅力
2021-05-31 02:38:47
@Chris 使用受控组件清除表单的最佳做法是什么？有人告诉我“将输入的状态设置为 '' 被认为是一种反模式。”，他们建议在 componentWillUnmount 上使用它，但要谨慎。作为替代使用 document.getElementById("someID").value = '' 所以我迷路了？有任何想法吗
2021-06-02 02:38:47
如何用钩子做到这一点？
2021-06-07 02:38:47

很简单： 

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

祝你好运 ：）

从字面上看，如何重置表单输入的最佳答案。
2021-06-07 02:38:47
我收到此错误TypeError: Cannot read property 'preventDefault' of undefined 而不是表单我有另一个组件，我在其中调用 handleSubmit()。我正在使用反应 js
2021-06-10 02:38:47
@tramada 它为我清理表单中的所有输入。请重新检查
2021-06-13 02:38:47
尝试e = e || window.event之前e.preventDefault()处理TypeError: Cannot read property 'preventDefault' of undefined @Amnahkhatun
2021-06-20 02:38:47

使用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
+1 供您使用initialState，如果您要在多个位置重置表单（例如，重置按钮以及提交后），那就太好了
2021-06-05 02:38:47

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

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

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

以下代码应一键重置表单。

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

正确，但我已经在我的答案中涵盖了这一点。此外，refs不推荐使用字符串字面量。reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
2021-05-23 02:38:47
@Chris，是的，确实refs很难测试，尤其是在使用时shallow
2021-05-24 02:38:47
其它你可能感兴趣的问题
上一篇React：父组件重新渲染所有子组件，即使是那些在状态改变时没有改变的子组件 下一篇在 React 类组件中设置操作前后的加载状态