Очистить поле ввода с помощью Reactjs?

Я использую переменную ниже.

var newInput = {
   title: this.inputTitle.value,
   entry: this.inputEntry.value    
};

Это используется моими полями ввода.

<input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} />   
<textarea id="inputage" ref={el => this.inputEntry = el} className="form-control" />
<button className="btn btn-info" onClick={this.sendthru}>Add</button>

После активации {this.sendthru} я хочу очистить поля ввода. Однако я не уверен, как это сделать.

Также, как показано в этом примере, мне было указано, что я должен использовать свойство ref для входных значений. Что мне неясно, так это то, что именно значит иметь {el => this.inputEntry = el}. Каково значение el в этой ситуации?

Ответ 1

Позвольте мне предположить, что вы сделали привязку this к функции sendThru.

Приведенные ниже функции очищают поля ввода при запуске метода.

sendThru() {
    this.inputTitle.value = "";
    this.inputEntry.value = "";
}

Ссылки могут быть записаны как встроенное выражение функции:

ref={el => this.inputTitle = el}

где el относится к компоненту.

Когда ссылки пишутся, как указано выше, React каждый раз видит другой объект функции, поэтому при каждом обновлении ref будет вызываться с нулем непосредственно перед вызовом с экземпляром компонента.

Подробнее об этом читайте здесь.

Ответ 2

Объявить атрибут значения для входного тега (i.e value= {this.state.name}), и если вы хотите очистить эту входную шкалу, вы должны использовать this.setState({name : ''})

Рабочий код PFB для справки:

<script type="text/babel">
    var StateComponent = React.createClass({
        resetName : function(event){
            this.setState({
                name : ''
            });
        },
        render : function(){
            return (
                <div>
                    <input type="text" value= {this.state.name}/>
                    <button onClick={this.resetName}>Reset</button>
                </div>
            )
        }
    });
    ReactDOM.render(<StateComponent/>, document.getElementById('app'));
</script>

Ответ 3

Я не уверен в синтаксисе {el = > this.inputEntry = el}, но при очистке поля ввода вы назначаете ссылку, как вы упомянули.

<input type="text" ref="someName" />

Затем в функции onClick после того, как вы закончите использовать входное значение, просто используйте...

this.refs.someName.value = '';

Edit

На самом деле {el = > this.inputEntry = el} совпадает с тем, что я считаю. Может быть, кто-то может меня поправить. Значение el должно быть передано откуда-то, чтобы действовать как ссылка.

function (el) {
    this.inputEntry = el;
}

Ответ 4

Способ, которым я очистил свои входные значения формы, должен был добавить идентификатор к моему тегу формы. Затем, когда я обрабатываю Sububmit, я вызываю this.clearForm()

В функции clearForm я затем использую document.getElementById("myForm"). Reset();

import React, {Component } from 'react';
import './App.css';
import Button from './components/Button';
import Input from './components/Input';

class App extends Component {  
  state = {
    item: "", 
    list: []
}

componentDidMount() {
    this.clearForm();
  }

handleFormSubmit = event => {
   this.clearForm()
   event.preventDefault()
   const item = this.state.item

    this.setState ({
        list: [...this.state.list, item],
            })

}

handleInputChange = event => {
  this.setState ({
    item: event.target.value 
  })
}

clearForm = () => {
  document.getElementById("myForm").reset(); 
  this.setState({
    item: ""
  })
}



  render() {
    return (
      <form id="myForm">
      <Input

           name="textinfo"
           onChange={this.handleInputChange}
           value={this.state.item}
      />
      <Button
        onClick={this.handleFormSubmit}
      >  </Button>
      </form>
    );
  }
}

export default App;