отображение сообщения Fla sh в реакции - PullRequest
Новая
       43

отображение сообщения Fla sh в реакции

0 голосов
/ 11 марта 2020

Моя задача - отобразить сообщение fla sh («успешно создано») при нажатии кнопки отправки. [При нажатии кнопки отправки данные будут сохранены на сервере] Я выполнил эту команду npm Я реагирую -fla sh -message. 

<form onSubmit={this.handleSubmit}>
   <input type="submit" value="Submit" />
 </form>

Функция handleSubmit: 

  handleSubmit(event) {
     fetch('url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: this.state.name,
                description: this.state.description
            })
        }).then(res => {
            return res.json()
        })
            .then(data => console.log(data))
            .then(() => {
                window.location.reload(false)
                /* return (
                     <div>
                        <FlashMessage duration={5000}>
                            <strong>I will disapper in 5 seconds!</strong>
                       </FlashMessage>
                   </div>
                 ) */
            })
            /* window.flash('record has been created successfully!', 'success') */

            .catch(error => console.log('ERROR from create component'))
      }
     }

Я прокомментировал код, который пытался отобразить сообщение fla sh. Но это не работает. Пожалуйста, кто-нибудь, помогите мне отобразить сообщение fla sh.

Ответы [ 2 ]

1 голос
/ 11 марта 2020

В соответствии со страницей реакции-fla sh, вы должны включить FlashMessage в свой рендер. Таким образом, вам может понадобиться переменная флага, чтобы установить значение true, когда вы хотите показать FlashMessage

Пример: в вашем рендере: 

<form onSubmit={this.handleSubmit}>
   <input type="submit" value="Submit" />
   { this.state.showMessage &&  
        <div>
            <FlashMessage duration={5000}>
                <strong>I will disapper in 5 seconds!</strong>
            </FlashMessage>
        </div>
   }

 </form>

Функция handleSubmit: 

handleSubmit(event) {
 this.setState({ showMessage: false });
 fetch('url', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: this.state.name,
                description: this.state.description
            })
        }).then(res => {
            return res.json()
        })
            .then(data => console.log(data))
            .then(() => {
                this.setState({ showMessage: true });
            })
            /* window.flash('record has been created successfully!', 'success') */

            .catch(error => console.log('ERROR from create component'))
      }
}

основная функция, если вы используете класс: 

 constructor(props) {
    super(props);
    this.state = {
      showMessage: false
    };
  }

https://www.npmjs.com/package/react-flash-message

1 голос
/ 11 марта 2020

Easy peasy .. При каждом использовании onSubmit не забывайте использовать event.preventDefault () ..

И попробуйте использовать только один, затем блок.

Теперь сохраните переменную состояния, чтобы установить статус результата. После получения результата установите для состояния результата значение true.

Визуализируйте свой компонент FlashMessage, если оно истинно.

https://codesandbox.io/s/lucid-taussig-9x0o3

...