那些遇到过的问题

清除并重置表单输入字段

Che*_*neZ 38 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>
Run Code Online (Sandbox Code Playgroud)

我想要的是在单击取消按钮时清空所有输入.到目前为止,我已经设法通过使用每个输入的ref prop 来做到这一点.

cancelCourse(){
  this.refs.fieldName.value="";
  this.refs.fieldorg.value="";
  this.refs.fieldNum.value="";
}
Run Code Online (Sandbox Code Playgroud)

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

Chr*_*ris 61

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

另请注意,不推荐使用字符串文字ref.请改用标准回调方法.

清除带有不受控制的字段的表单

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

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

render() {
  return (
    <form id="create-course-form">
      <input />
      <input />
      ...
      <input />
    </form>
  );
}
Run Code Online (Sandbox Code Playgroud)

如果您的表单没有id属性,您也可以使用以下内容ref:

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

render() {
  return (
    <form ref={(el) => this.myFormRef = el;}>
      <input />
      <input />
      ...
      <input />
    </form>
  );
}
Run Code Online (Sandbox Code Playgroud)

清除带有受控字段的表单

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

如果它们是单独声明的,则需要明确重置每个:

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}>
  );
}
Run Code Online (Sandbox Code Playgroud)

演示如下:

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"));
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

尽管如此,有一种更清洁的方法.而不是拥有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>
  );
}
Run Code Online (Sandbox Code Playgroud)

演示如下:

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"));
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

  • 对于未来读者想知道"控制"与"不受控制的字段"是什么,请查看[React主页上有关使用表单的文档](https://facebook.github.io/react/docs/forms.html). (3认同)

小智 38

很容易: 

handleSubmit(e){
    e.preventDefault();
    e.target.reset();
}
Run Code Online (Sandbox Code Playgroud) 
<form onSubmit={this.handleSubmit.bind(this)}>
  ...
</form>
Run Code Online (Sandbox Code Playgroud)

祝好运 :)

  • 很好回答:) (2认同)

小智 14

使用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
Run Code Online (Sandbox Code Playgroud)

Col*_*ole 8

这是对上面 Chris 答案的更新，使用现代React hooks。

相同的高层次理念；您的表单可以是受控组件或非受控组件。

不受控制的组件：

不受控制的组件将状态管理留给浏​​览器。这意味着您必须要求浏览器重置表单输入。为此，请将表单元素捕获为ref，然后调用submit()该元素上的方法。

export default function Form() {
  const ref = React.useRef();

  function reset(ev) {
    ev.preventDefault();
    ref.current.reset();
  }

  return (
    <form ref={ref}>
      <label htmlFor="email">Email Address</label>
      <input id="email" type="email" name="email" />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" />
      <button type="submit">Submit</button>
      <button onClick={reset}>Reset</button>
    </form>
  );
}
Run Code Online (Sandbox Code Playgroud)

受控组件：

使用受控组件，您可以管理 React 中的状态。这意味着您必须创建初始状态，并在每次输入更改时更新它。在这个世界中，重置表单只是将表单状态设置回其初始状态。

export default function Form() {
  const [state, setState] = React.useState({ email: "", message: "" });

  function reset(ev) {
    ev.preventDefault();
    setState({ email: "", message: "" });
  }

  return (
    <form className="Form">
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        type="email"
        name="email"
        value={state.email}
        onChange={(ev) => {
          setState({ ...state, email: ev.target.value });
        }}
      />
      <label htmlFor="message">Message</label>
      <textarea
        id="message"
        name="message"
        value={state.message}
        onChange={(ev) => {
          setState({ ...state, message: ev.target.value });
        }}
      />
      <button type="submit">Submit</button>
      <button onClick={reset}>Reset</button>
    </form>
  );
}
Run Code Online (Sandbox Code Playgroud)

完整示例位于https://codesandbox.io/s/reactformreset-10cjn3

小智 7

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

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

<form onSubmit={this.handleSubmit}>
  ...
</form>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

97113 次

最近记录：

6 年，3 月 前
相关归档
如何使webpack dev服务器在端口80和0.0.0.0上运行以使其可公开访问？ 169
使用react-router检测用户离开页面 74
使用gulp-browserify为我的React.js模块我在浏览器中得到'require is not defined' 21
docker-compose，未能解决：rpc 错误：代码 = 未知 desc = 无法计算缓存密钥：“/app/package.json”未找到：未找到 20
如何在传播运营商中传递几个道具作出反应 12
如何console.log in playwright 11
为什么在React的#setState中使用函数解决了异步问题？ 9
返回 input 或 textArea 的元素的 React/Typescript forwardRef 类型 9
Next.js 中的路由守卫 + react 8
用于thunk调度的正确TypeScript类型？ 8
难疑归档
如何在ActionScript 3中将"Null"(真正的姓氏!)传递给SOAP Web服务？ 4603
最终C++书籍指南和列表 4246
你如何获得JavaScript的时间戳？ 3844
如何在Java中生成特定范围内的随机整数？ 3373
Facebook如何禁用浏览器的集成开发人员工具？ 1652
重命名pandas中的列 1601
为什么在允许某些Unicode字符的注释中执行Java代码？ 1326
JavaScript中是否有"null coalescing"运算符？ 1305
如何在Bash中将字符串转换为小写？ 1158
检查是否使用jQuery选中了复选框 1122