Разрешить обещание только после того, как пользователь предоставил ввод в React.js

Question

Предположим, что я установил стороннюю библиотеку реагирующих компонентов с именем something, которая вызывает функцию async, переданную ей через onRequestName prop.

something будет использовать разрешенные данныеиз асинхронной функции для рендеринга результата.

<Something onRequestName={this.asyncFunction}/>

Моя async функция требует пользовательского ввода, и я хочу разрешить его только , когда пользователь предоставляетвход (иначе я должен отклонить обещание).

asyncFunction = async () => {
  // get user input and then resolve this funciton
} 

Как мне поступить в этой ситуации?

единственный источник, который я нашел, который обсуждает похожую ситуацию, это это , которое вообще не касается реакции.

Мне не известно ни о каком другом вопросе stackoverflow, касающемся этой проблемы.Если вы знаете об этом, дайте мне знать.

---

В настоящее время я делаю что-то вроде этого (что выглядит безумно неправильно):

// my async function sets a resolve in State of the component
asyncFunction = () => {
  return new Promise((res, rej) => {
    this.setState({resolve: res, reject: rej, showForm: true})
  };
}

И затем я звоню resolve, которыйдоступен в состоянии, когда пользователь вводит:

// resolve promise on user input

    {showForm &&
      <form 
         onSubmit={() => {
          this.state.resolve(this.state.userInput) // <-- resolve is called here
          this.setState({showForm: false})
         }}
      >
        <label>
          Name:
          <input 
            type="text" 
            value={this.state.value} 
            onChange={e => this.setState({userInput: e.target.value})} 
          />
        </label>
        <input type="submit" value="Submit" />
      </form>
    }