Question

在发生onClick之后以及将其存储在localStorage中之后，我需要对输入实施清除/重置。我似乎无法弄清楚如何在哪里编写代码。这是我的添加功能和渲染功能。

addExpense(e) {
e.preventDefault()
let exList = this.state.exList
if (this.state.expense === null) {
  alert('Please enter a name.')
  return false
}
if (this.state.amount === 0) {
  alert('Please enter a valid amount.')
  return false
}
if(isNaN(this.state.amount)) {
  alert('The amount must be a number.')
  return false
}
this.state.exList.push({ 'title':this.state.title, 'amount':this.state.amount })
this.setState({ exList: this.state.exList })
localStorage.setItem('exList', JSON.stringify(exList))
}

render() {
let myExpenses = this.state.exList.map((val, key) => { return <ExpenseList val={val} key={key} id={key} delMe={() =>this.removeExpense(key) } />
})
return (
  <main className="ContactList">
    <section className="add container">
      <h2 className="newExpense">Add Expense</h2>
      <form name="myForm">
        <p>
          <label>Title </label>
          <input type="text" name="title" onChange= . 
   {this.changeExpense} />
          <label>Amount </label>
          <input type="text" name="amount" onChange= . 
   {this.changeAmount} />
          <button type="submit" className="btn" onClick= . 
   {this.addExpense}>Add</button>
        </p>
      </form>
    </section>

    <section className="container">
      <h3 className="currentExpense">Current Expenses</h3>
      <article className="contentScroll">
        <ul className="expenseCont">{myExpenses}</ul>
      </article>
    </section>
  </main>
)
}

Answer 1

如果您只是想清除某些表单字段，则可以在提交到''后为每个字段设置状态。

例如：

this.setState({
  amount: '', 
  exList: ''
});

您将在保存和处理所有数据之后添加此内容，因此在功能结束时就可以了。或者，您可以创建另一个函数来处理清除每个表单字段。

Answer 2

在反应中，一切都取决于您的状态，如果状态字段的值发生了变化，则您的页面将再次通过反应呈现

因此，如果要清除表单的所有字段，则必须清除与文本关联的对象。

就像我将对象设置为处于类似

那样的组件构造状态中

this.setState({name: '', email: '', phone_number: ''});

现在，经过一些操作，我状态下的所有字段都具有值。现在，我想在单击按钮清除后清除所有字段，然后为清除按钮创建一个函数，然后在清除函数中编写以下代码

const clear_obj = Object.assign({},this.state);
for(let key in clear_obj){
  clear_obj[key] = '';
}
this.setState(clear_obj);

我还可以设置默认值，以便它看起来很新。

Answer 3

您需要具有输入的value属性

value={this.state.expense}

和

value={this.state.amount}

在changeExpense和changeAmount中，您需要使用新值设置状态。

要清除输入，请在localStorage调用下的addExpense中再次设置setState

this.setState({ expense: '', amount: '' })

您的代码如下所示。

addExpense(e) {
e.preventDefault()
let exList = this.state.exList
if (this.state.expense === null) {
  alert('Please enter a name.')
  return false
}
if (this.state.amount === 0) {
  alert('Please enter a valid amount.')
  return false
}
if(isNaN(this.state.amount)) {
  alert('The amount must be a number.')
  return false
}
this.state.exList.push({ 'title':this.state.title, 'amount':this.state.amount })

localStorage.setItem('exList', JSON.stringify(exList))
this.setState({ expense: '', amount: '', exList: this.state.exList });
}

render() {
let myExpenses = this.state.exList.map((val, key) => { return <ExpenseList val={val} key={key} id={key} delMe={() =>this.removeExpense(key) } />
})
return (
  <main className="ContactList">
    <section className="add container">
      <h2 className="newExpense">Add Expense</h2>
      <form name="myForm">
        <p>
          <label>Title </label>
          <input type="text" name="title" value={this.state.expense} onChange= . 
   {this.changeExpense} />
          <label>Amount </label>
          <input type="text" name="amount" value={this.state.amount} onChange= . 
   {this.changeAmount} />
          <button type="submit" className="btn" onClick= . 
   {this.addExpense}>Add</button>
        </p>
      </form>
    </section>

    <section className="container">
      <h3 className="currentExpense">Current Expenses</h3>
      <article className="contentScroll">
        <ul className="expenseCont">{myExpenses}</ul>
      </article>
    </section>
  </main>
)
}

如何使用ReactJS在onClick之后清除输入

3 个答案: