Я хочу создать кнопку, которая при нажатии добавляет в форму новый ввод (или текстовое поле).
Как вы динамически создаете входные данные в Elm?
Ответы (2)
Если вы хотите, чтобы текстовое поле добавлялось при каждом нажатии кнопки, это означает, что вы хотите, чтобы количество отображаемых текстовых полей было равно количеству нажатий кнопки. Мы можем создать сигнал, сообщающий нам, как часто была нажата кнопка, используя countIf id
в сигнале clicked
кнопки¹.
Если у нас есть список входных данных, мы можем использовать flow
, чтобы отобразить их под (или рядом) друг с другом. Довольно просто написать функцию, которая принимает число n
и создает список, содержащий кнопку и n
текстовых полей.
Так что теперь мы можем просто использовать lift
, чтобы подключить эту функцию к нашему сигналу, который подсчитывает количество нажатий кнопки, объединить это с функцией flow
, и вуаля, у нас есть кнопка, которая динамически создает входные данные.
(btn, clicked) = Input.button "Click me!"
-- Count how often the clicked signal is true
clicks = countIf id clicked
main = lift2 flow (constant down) $ lift nInputs clicks
nInputs n =
let helper n acc =
if n<=0 then btn : acc
else
-- Input.textField returns a pair containing the field as well as a signal
-- that you can use to access the field's contents. Since I don't actually
-- ever do anything with the contents, I just ignore the signal here.
-- In your real code, you'd probably want to keep the signal around as well.
let (field, _) = Input.textField $ "input " ++ (show n)
in helper (n-1) $ field : acc
in helper n []
¹ Простое использование count
будет подсчитывать, как часто меняется сигнал. Поскольку каждый щелчок приводит к тому, что значение сигнала изменяется на истинное, а затем обратно на ложное, это будет учитывать 2 изменения за щелчок. Используя countIf id
, мы подсчитываем только количество раз, когда сигнал является истинным, и, следовательно, количество кликов.
Начиная с Elm 0.8, это действительно можно сделать. См. объявление о выпуске, группы ввода раздел онлайн-справочника и пример кода.