单击按钮后如何重置输入状态值？

大佬教程收集整理的这篇文章主要介绍了单击按钮后如何重置输入状态值？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决单击按钮后如何重置输入状态值？？

我希望能够在单击按钮时摆脱该值。我知道我需要将代码添加到函数 dataPush。我试过这个：

(this.name.value=''; this.pw.value='';)

在函数 dataPush 中。但它不会工作。我应该添加什么代码？

import React,{ Component } from "react";
import "../Product/Product.sCSS";

export class Product extends Component {
  constructor() {
    super();
    this.state = {
      name: "",pw: "",users: [],};
    this.fillinput = this.fillinput.bind(this);
    this.dataPush = this.dataPush.bind(this);
  }
  fillinput = (e) => {
    this.setState({ [e.target.ID]: e.target.value });
    console.log(this.state.name);
    console.log(this.state.pw);
  };
  dataPush = () => {
    let obj = {
      name: this.state.name,pw: this.state.pw,};
    let arr = this.state.users;
    arr.push(obj);

    this.setState({
      users: arr,});
  };

  render() {
    return (
      <div classname="product">
        <div class="inputWrap">
          <input
            ID="name"
            type="text"
            placeholder="ID"
            onChange={this.fillinput}
          />
          <input
            ID="pw"
            type="text"
            placeholder="pw"
            onChange={this.fillinput}
          />
        </div>

        <button type="reset" onClick={this.dataPush}>
          submit
        </button>
        <div>
          {this.state.users.map((ele) => {
            return (
              <div>
                {ele.name} : {ele.pw}
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default Product;

解决方法

dataPush = ()=>{
    let obj = {
        name : this.state.name,pw :  this.state.pw
    }
    let arr= this.state.users;
    arr.push(obj);

    this.setState({
        users:arr
        pw:"",name:""
    })
}

<input value={this.state.name} id='name' type='text' placeholder="id" onChange={this.fillInput} />
<input value={this.state.pw} id='pw' type='text' placeholder="pw" onChange={this.fillInput} />

大佬总结

以上是大佬教程为你收集整理的单击按钮后如何重置输入状态值？全部内容，希望文章能够帮你解决单击按钮后如何重置输入状态值？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。