Как очистить ввод после OnClick с ReactJS

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({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 2

У вас должен быть атрибут value для входных данных

value={this.state.expense}

и

value={this.state.amount}

в changeExpense и changeAmount вам нужно установить состояние с новым значением.

для очистки ввода, в addExpense под вызовом localStorage вам нужно снова установитьState

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

Answer 3

Если вы просто пытаетесь очистить некоторые поля формы, вы можете установить состояние для каждого поля после отправки на ''.

Например:

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

Вы добавите это после того, как все ваши данные будут сохранены и обработаны, так что в конце вашей функции все будет в порядке. Или вы можете создать другую функцию для очистки каждого поля формы.