Ввод текста

В прошлом уроке мы научились описывать код действия и вызывать его при клике на кнопку. В этом уроке мы научимся использовать текстовое поле для ввода ответа. Для начала возьмем тот код, который мы создали в прошлом уроке. Можно использовать тот же файл, что был, или скопировать код в новый.

// Import showToast action
import {showToast} from '@app/ui'

const question = {
  label: 'The Capital of Great Britain',
  answers: [ 'New York', 'Liverpool', 'London' ],
  correct: 'London',
}

// Screen with 3 buttons and question
app.screen('/', async function(ctx, req) {
  return <screen title="Question">

    <text class="section">{question.label}</text>

    {question.answers.map( answer =>
      <button
        onClick={buttonHandler.apiCall({ value: answer })}
        class={["secondary","section"]}
        title={answer}
      />
    )}
  </screen>
})

// Handler for button
const buttonHandler = app.apiCall('/check', async function(ctx, req) {
  return  ( req.body.value === question.correct )
    ? showToast("Correct")
    : showToast(req.body.value + ' is not correct');
})

Напомним что делает этот код: он показывает вопрос и варианты ответа на него. При клике на правильный вариант он выдает сообщение Correct, на неправильный дает ошибку.

Давайте чуть усложним задачу: сделаем так, чтобы можно было дать свой вариант ответа.

Но при этом, уберем правильный ответ из предлагаемых:

const question = {
  label: 'The Capital of Great Britain',
  answers: [ 'New York', 'Liverpool', 'Manchester' ],
  correct: 'London',
}

Теперь добавим в экран еще одну кнопку: Different answer... под всеми остальными кнопками.

 {question.answers.map( answer =>
    <button
      onClick={buttonHandler.apiCall({ value: answer })}
      class={["secondary","section"]}
      title={answer}
    />
)}
<button
  class={["secondary","section"]}
  title="Different answer..."
/>

Теперь нам нужно сделать так, чтобы при нажатии на эту кнопку приложение спросило у пользователя его вариант и отправило его на проверку.

Для этого мы воспользуемся методом showTextDialog, предварительно импортировав его в начале файла:

import {showTextDialog} from '@app/ui'

Этот метод позволяет показать поле ввода и отправить введённый текст на указанный нами URL. Чтобы получить этот URL по отношению к текущему роутеру, мы снова воспользуемся .router. Но в этот раз используем не .apiCall возвращающего готовое действие, а .url возвращающий нам только URL.

<button
  class={["secondary","section"]}
  title="Different answer..."
  onClick={showTextDialog({
    submitUrl: buttonHandler.url(),
    title: 'Enter your answer'
  })}
/>

Сразу после этого у нас все будет работать. Нам даже не нужно править код обработчика. Дело в том, что showTextDialog отправляет свое поле в то-же самое параметр value, который будет доступен в обработчике с помощью req.body.value.

Итоговый код

Следующий шаг: Передаем состояния