如何将 Rust 函数传递给 html 按钮标签内的 onclick?

问题描述 投票:0回答:1

我想在按钮标签中为 onClick 传递一个 Rust 函数。我知道如何传递变量,但不知道如何传递函数。

下面是我的 rust 文件,我在其中调用路线:

use rocket_dyn_templates::{context, Template};
use serde::Serialize;

#[derive(Serialize)]
struct Context {
    prompt: String,
}

#[macro_use]
extern crate rocket;

fn submit(prompt: String) {
    println!("value is {prompt}");
}

#[get("/")]
fn index() -> Template {
    let prompt: String = "".to_string();
    Template::render("index", context! { field: prompt })
}

#[launch]
fn rocket() -> _ {
    rocket::build()
        .mount("/", routes![index])
        .attach(Template::fairing())
}

我的html文件:

<head>
  <style type="text/css">
    <title>Generator Image</title>body {
      background: #1a6875;
      font-family: Arial, Helvetica, sans-serif;
    }

    .container-prompt {
      height: 10em;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .submit-prompt {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="container-submit">
    <div class="submit-prompt">
      <input method="text" name="prompt" id="prompt"/>
      <button onClick="">Submit</button>
    </div>
  </div>
</body>

最后,我想在单击按钮时使用 rust 函数的输入标记中使用的变量提示作为参数。

谢谢。

rust rocket
1个回答
0
投票

一种可能性是为提交按钮创建新路线。
实现会是这样的:

struct Prompt(String);

#[rocket::async_trait]
impl<'r> FromRequest<'r> for Prompt {
    type Error = rocket::http::uri::error::Error<'r>;
    async fn from_request(request: &'r Request<'_>) -> Outcome<Self, Self::Error> {
        let query = request.uri().query().unwrap();
        println!("{:?}", query);

        let query_segments: Vec<_> = query.segments().collect();

        let mut prompt: Option<String> = None;
        for segment in query_segments {
            if segment.0 == "prompt" {
                prompt = Some(segment.1.to_string());
                break;
            }
        }

        Outcome::Success(Prompt(prompt.unwrap_or_default()))
    }
}

#[get("/submit")]
fn submit(prompt: Prompt) -> String {
    println!("value is {}", prompt.0);
    format!("Hello {}", prompt.0)
}

然后,您可以这样做:

,而不是使用 onclick 函数
    <div class="submit-prompt">
        <input method="text" name="prompt" id="prompt" onchange="prompt()"/>
        <a href="/" id="anchor">
            <button>Submit</button>
        </a>
    </div>

提示功能将是(您可以将其包含在头部,就在结束样式标签下方):

    <script>
        function prompt() {
            let prompt = document.getElementById('prompt');
            let anchor = document.getElementById('anchor');
            anchor.href = "/submit?prompt=" + prompt.value;
        }
    </script>

基本上,它的作用是为任何对路由“/submit”的 GET 请求创建一个新的处理程序。如果有对提交路由的请求,那么它将从请求中检索提示查询(例如,如果请求 uri“/submit?prompt=hello”,则提示将为“hello”)并显示它们到控制台和客户端。 javascript 检索提示文本和锚标记,并将锚标记的链接设置为“/submit?prompt=input_value”,以便提交按钮转到正确的位置。


希望这能解决问题......快乐编码!!!!

© www.soinside.com 2019 - 2024. All rights reserved.