Как я могу очистить свой ввод, когда я отправляю свое событие (реакция на приложение) - PullRequest
Новая
       15

Как я могу очистить свой ввод, когда я отправляю свое событие (реакция на приложение)

0 голосов
/ 20 января 2019

У меня есть 3 входа, значение которых я сохраняю и нажимаю на btn, я хотел бы очистить эти входы .......

моя функция, которая сохраняет значение одного из моих входов: 

onChangeIdentity = (event) => {
this.newPlayer = Object.assign({}, this.newPlayer, { strPlayer: 
event.target.value})
 }

мой вклад: 

<Input style={{width:'30%'}} onChange={ this.onChangeIdentity } 
 ref='myFormRef' value={ this.newPlayer.strPlayer } type='text' 
 placeholder='Nom & Prenom'/>

и функция, которая должна очистить мой ввод: 

addPlayer = () => {
  console.log('my new Player: ' , this.newPlayer);
  this.setState({
   teamPlayers: [...this.state.teamPlayers, this.newPlayer]
 })

this.refs.myFormRef.value = ""
 }

Я пробовал несколько способов объявить свои ссылки, но ничего не работает ..... есть идеи?

1 Ответ

0 голосов
/ 20 января 2019

Введенные вами значения управляются state компонента value={this.newPlayer.strPlayer}.Если вы хотите очистить значение ввода, вам необходимо очистить состояние, которое соответствует ему, например: 

this.setState({newPlayer: {strPlayer: ''}});

После установки состояния компонент обновляется автоматически и отображает вход как пустой.

Вот полный пример компонента: 

class MyComponent extends Component {
  state = {
    inputValue: ""
  };

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={event => this.setState({ inputValue: event.target.value })}
        />
        <button
          onClick={() => {
            /* submit this.state.inputValue */
            this.setState({ inputValue: "" }); // reset input value
          }}
        >
          submit
        </button>
      </div>
    );
  }
}
...