Javascript 点击按钮后如何调用函数并显示结果_Javascript_Html_Json_Amazon Web Services

Javascript 点击按钮后如何调用函数并显示结果

javascript html json amazon-web-services

Javascript 点击按钮后如何调用函数并显示结果,javascript,html,json,amazon-web-services,Javascript,Html,Json,Amazon Web Services,因此，函数test（）列出dynamoDB表中的项。我试图在单击按钮后调用该函数。我自己测试了这个函数，它运行正常。我只是不知道单击后如何调用它，然后返回并显示数据。代码是用javascript和一些HTML编写的。我对这一点很陌生，所以非常感谢您的帮助 import React from 'react'; import logo from './logo.svg'; import './App.css'; import Amplify from 'aws-amplify'; import aw

因此，函数test（）列出dynamoDB表中的项。我试图在单击按钮后调用该函数。我自己测试了这个函数，它运行正常。我只是不知道单击后如何调用它，然后返回并显示数据。代码是用javascript和一些HTML编写的。我对这一点很陌生，所以非常感谢您的帮助

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { AmplifySignOut, withAuthenticator } from '@aws-amplify/ui-react';

Amplify.configure(awsconfig);

function App() {
  return (
  <div className="App">
  <header className="App-header">
  <AmplifySignOut />
  <h2>Room Reservation System</h2>
  </header>
  
  <b>
    A little bit of information is needed:
  </b>


    <form>
      <lable for="meetingdate">Date of meeting: 
        <input type="date" name="meetingdate" required pattern="\d{4}-\d{2}-\d{2}">
        </input>
        <span class="validity"></span>
        </lable>
    </form>

  <p>
    Time of meeting: 
    <select id="selecttime">
      <option value="9am">9 AM</option>
      <option value="10am">10 AM</option>
      <option value="11am">11 AM</option>
      <option value="12pm">12 PM</option>
      <option value="1pm">1 PM</option>
      <option value="2pm">2 PM</option>
      <option value="3pm">3 PM</option>
      <option value="4pm">4 PM</option>
    </select>
  </p>

  <p>
    Duration of meeting (Max 3 Hours): 
    <select id="selectduration">
      <option value="1">1 Hour</option>
      <option value="2">2 Hours</option>
      <option value="3">3 Hours</option>
    </select>
  </p>

  <p>
    Meeting Capacity (Minimum of 4 People, Max of 10): 
    <select id="selectcap">
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </p>

  <script> {
  function read() {
   var AWS = require("aws-sdk");
   let awsConfig = {
    "region": "us-west-2",
    "endpoint": "http://dynamodb.us-west-2.amazonaws.com",
    "accessKeyId": "AKIATXDQF3UYRZV****", "secretAccessKey": "4azvTl67U8QW1id0j8Ck3/rAOqmEp4ajnKF*****"
};
AWS.config.update(awsConfig);
console.log('test');
let docClient = new AWS.DynamoDB.DocumentClient();

const dynamoDB = new AWS.DynamoDB.DocumentClient();
 
dynamoDB
    .scan({
        TableName: "Rooms",
    })
    .promise()
    .then(data => console.log(data.Items))
    .catch(console.error)
 }
}
 </script>
  <button type="button" onclick="read()">FIND ROOM</button>

</div>
 );
 }


export default withAuthenticator (App);

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“aws放大”导入放大；
从“/aws exports”导入awsconfig；
从'@aws amplify/ui react'导入{AmplifySignOut，withAuthenticator}；
放大、配置（awsconfig）；
函数App（）{
返回(
客房预订系统
需要一点信息：
会议日期：

会议时间：
上午9点
上午10点
上午11点
下午12点
下午一时
下午二时
下午三点
下午四点


会议持续时间（最多3小时）：
1小时
2小时
3小时


会议容量（最少4人，最多10人）：
4.
5.
6.
7.
8.
9
10

{
函数read（）{
var AWS=要求（“AWS sdk”）；
设awsConfig={
“地区”：“美国西部2号”，
“端点”：http://dynamodb.us-west-2.amazonaws.com",
“accessKeyId:“AKIATXDQF3UYRZV****”，“secretAccessKey:“4azvTl67U8QW1id0j8Ck3/rAOqmEp4ajnKF****”
};
AWS.config.update（awsConfig）；
console.log（'test'）；
让docClient=new AWS.DynamoDB.DocumentClient（）；
const dynamoDB=新的AWS.dynamoDB.DocumentClient（）；
发电机
.扫描({
表名：“房间”，
})
.承诺
.then（data=>console.log（data.Items））
.catch（console.error）
}
}
找地方
);
}
使用验证器导出默认值（App）；

您的JSX按钮应该如下所示：

<button type="button" onClick={read}>FIND ROOM</button>

找房间

我还将删除脚本标记，并将read（）函数放在应用程序组件中返回的上方。这将是您的代码：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
import { AmplifySignOut, withAuthenticator } from "@aws-amplify/ui-react";

Amplify.configure(awsconfig);

function App() {
  
  const read = () => {
    var AWS = require("aws-sdk");
    let awsConfig = {
      region: "us-west-2",
      endpoint: "http://dynamodb.us-west-2.amazonaws.com",
      accessKeyId: "AKIATXDQF3UYRZV****",
      secretAccessKey: "4azvTl67U8QW1id0j8Ck3/rAOqmEp4ajnKF*****",
    };
    AWS.config.update(awsConfig);
    console.log("test");
    let docClient = new AWS.DynamoDB.DocumentClient();

    const dynamoDB = new AWS.DynamoDB.DocumentClient();

    dynamoDB
      .scan({
        TableName: "Rooms",
      })
      .promise()
      .then((data) => console.log(data.Items))
      .catch(console.error);
  };

  return (
    <div className="App">
      <header className="App-header">
        <AmplifySignOut />
        <h2>Room Reservation System</h2>
      </header>

      <b>A little bit of information is needed:</b>

      <form>
        <lable for="meetingdate">
          Date of meeting:
          <input type="date" name="meetingdate" required pattern="\d{4}-\d{2}-\d{2}"></input>
          <span class="validity"></span>
        </lable>
      </form>

      <p>
        Time of meeting:
        <select id="selecttime">
          <option value="9am">9 AM</option>
          <option value="10am">10 AM</option>
          <option value="11am">11 AM</option>
          <option value="12pm">12 PM</option>
          <option value="1pm">1 PM</option>
          <option value="2pm">2 PM</option>
          <option value="3pm">3 PM</option>
          <option value="4pm">4 PM</option>
        </select>
      </p>

      <p>
        Duration of meeting (Max 3 Hours):
        <select id="selectduration">
          <option value="1">1 Hour</option>
          <option value="2">2 Hours</option>
          <option value="3">3 Hours</option>
        </select>
      </p>

      <p>
        Meeting Capacity (Minimum of 4 People, Max of 10):
        <select id="selectcap">
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </p>

      <button type="button" onClick={read}>
        FIND ROOM
      </button>
    </div>
  );
}

export default withAuthenticator(App);

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“aws放大”导入放大；
从“/aws导出”导入awsconfig；
从“@aws amplify/ui react”导入{AmplifySignOut，withAuthenticator}”；
放大、配置（awsconfig）；
函数App（）{
常量读取=（）=>{
var AWS=要求（“AWS sdk”）；
设awsConfig={
地区：“美国西部2号”，
端点：“http://dynamodb.us-west-2.amazonaws.com",
accessKeyId:“AKIATXDQF3UYRZV****”，
秘书访问密钥：“4azvTl67U8QW1id0j8Ck3/rAOqmEp4ajnKF****”，
};
AWS.config.update（awsConfig）；
控制台日志（“测试”）；
让docClient=new AWS.DynamoDB.DocumentClient（）；
const dynamoDB=新的AWS.dynamoDB.DocumentClient（）；
发电机
.扫描({
表名：“房间”，
})
.承诺
.then（（数据）=>console.log（数据项））
.catch（控制台错误）；
};
返回(
客房预订系统
需要一点信息：
会议日期：

会议时间：
上午9点
上午10点
上午11点
下午12点
下午一时
下午二时
下午三点
下午四点


会议持续时间（最多3小时）：
1小时
2小时
3小时


会议容量（最少4人，最多10人）：
4.
5.
6.
7.
8.
9
10

找地方
);
}
使用验证器导出默认值（App）；

我试过了，但现在代码无法编译。“'read'未定义no undef”您将在我的脚本中的最后一段代码添加到哪里？代码现在可以编译了，但按钮仍然不起任何作用：@jordanlong1立即尝试。我忘了把按钮上的onclick改为onclick。在React中，JSX属性的格式是camelCase，与HTML的小写格式不同，它仍然没有做任何事情。你认为这是因为我需要一个地方来展示它吗？