Блог

Как я могу использовать alert() , чтобы разрешить пользователю вводить свое имя и сохранять его в state?

Вот что я пытался до сих пор:

 render: function() {
    return (
      <div>
        <input type="text" onChange={ this.handleChange } />
        <Button>Save</Button>
      </div>
    );
  }
}
  

Одним из вариантов было бы использовать prompt() функцию, которая отображает модальное диалоговое окно, через которое пользователь может вводить и получать входные данные. prompt() Метод также позволяет вам предоставить пользовательское приветствие, которое может быть передано в качестве первого аргумента следующим образом:

     const enteredName = prompt('Please enter your name')
  

Интеграция этого с вашим существующим компонентом react может быть выполнена несколькими способами — один из подходов может быть следующим:

 /* Definition of handleClick in component */
handleClick = (event) => {

    /* call prompt() with custom message to get user input from alert-like dialog */
    const enteredName = prompt('Please enter your name')

    /* update state of this component with data provided by user. store data
       in 'enteredName' state field. calling setState triggers a render of
       this component meaning the enteredName value will be visible via the
       updated render() function below */
    this.setState({ enteredName : enteredName })
}

render: function() {
    return (
      <div>

        {/* For demonstration purposes, this is how you can render data 
            previously entered by the user */ }
        <p>Previously entered user name: { this.state.enteredName }</p>

        <input type="text" onChange={ this.handleChange } />
        <input
          type="button"
          value="Alert the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});
  

Я думаю, вы имеете в виду prompt():

 var userName = prompt('Please Enter your Name')
  

Переменная userName будет содержать ответ пользователя.