Как получить значение поля ввода в Phoenix Framework?

Я пытаюсь получить входной текст из html-ввода, который должен быть сообщением в чате. Затем я хочу добавить этот текст в историю чата ниже.

Мой (обновленный!) Код до сих пор:

defmodule ChatWeb.ChatLive do 
    use ChatWeb, :live_view
    
        def mount(params, session, socket) do
            {:ok, assign(socket, :text_value, "")}
        end
        
        def render(assigns) do
        ~H"""
            <h1>Chat</h1>
            <form phx-submit = "submit">
            <label>Your Text:<input id = "msg" type = "text" name = "input_value" /></label>
            <button>Send</button>
            </form>
            <div id = "chat">
                Chat history: <%= @text_value %>
            </div>
            
        """
        end
        
        def handle_event("send-msg", %{"input_value" => msg}, socket) do
            {:noreply, assign(socket, :text_value, msg)}
        end
        
end

Вот как это выглядит до сих пор:

Какая у вас проблема? Что не работает?

— 19.12.2022 13:50

@AlekseiMatiushkin Мне нужно получить значение, которое вводится во ввод html, и объединить его с переменной text_value. Мне не хватает общего понимания того, как это сделать. В обновленном фрагменте кода выше проблема заключается в том, что текст не добавляется к text_value.

— 19.12.2022 18:09

assign(socket, :text_value, msg <> socket.assigns.text_value) должен сделать.

— 19.12.2022 19:51

elixir phoenix-framework

19.12.2022 10:33

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

155

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

У вас есть эта функция handle_event:

    def handle_event("send-msg", %{"input_value" => msg}, socket) do
        {:noreply, assign(socket, :text_value, msg)}
    end

... но не похоже, что "send-msg" привязан к чему-либо. Вот дополнительная информация о привязках в LiveView, включая пример кода: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-bindings

Похоже, ваша кнопка «Отправить» в настоящее время привязана к событию "submit" с помощью этого кода:

<form phx-submit = "submit">

Если вы просто измените "send-msg"def handle_event("send-msg"... на "submit", все будет работать нормально, и text_value будет назначено значение поля ввода, как и ожидалось.

19.12.2022 22:56

С помощью ваших ответов и комментариев (Спасибо!) Я смог решить это следующим образом:

defmodule ChatWeb.ChatLive сделать использовать ChatWeb, :live_view

    def mount(params, session, socket) do
        {:ok, assign(socket, :text_value, "")}
    end
    
    def render(assigns) do
    ~H"""
        <h1>Chat</h1>
        <form phx-submit = "submit">
            <label>Your Name:<input id = "client" type = "text" name = "client" /></label>
            <label>Your Text:<input id = "msg" type = "text" name = "input_value" /></label>
            <input type = "submit" />
        </form>
        <div id = "chat">
            Chat history: <%= @text_value %>
        </div>
        
    """
    end
    
    def handle_event("submit", %{"input_value" => msg, "client" => client}, socket) do
        {:noreply, assign(socket, :text_value, "| Message by " <> client <> ": '" <> msg <> "' " <> socket.assigns.text_value)}
    end
    
     end

если мой ответ помог вам, не могли бы вы проголосовать за него / отметить его как принятый?

— 20.12.2022 18:37

20.12.2022 16:58