小编Art*_*Art的帖子

有没有办法在 JavaScript 中动态检测 CSS 网格中元素所在的网格列和行？

我有一个网格，我设置了三个断点，使其具有 4、3 或 2 列。

我想要做的是，如果用户单击某个单元格，则将单元格中的新元素立即动态覆盖到被单击的单元格的右侧，除非它位于最右侧的列中，在这种情况下，覆盖元素将进入左侧的单元格。

我知道我可以使用grid-column和grid-row来指定我想要放入新内容的单元格，但为了能够使用它，我需要知道被单击的单元格的列和行。

我怎样才能动态地确定这一点？

我是频道的新手，我按照他们的官方文档制作了一个聊天室应用程序。现在我正在尝试保存聊天消息。我所知道的是我可以创建一个模型，但不知道如何将其从consumers.py 保存到我的数据库中。我随消息添加了用户名。如果有一点帮助，我们将不胜感激。

我的消费者.py：

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = 'chat_%s' % self.room_name

        # Join room group
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # Leave room group
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # Receive message from WebSocket
    async def receive(self, text_data):
        username = self.scope["user"].first_name
        name = self.scope['user'].username
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        message = (username + '(' + name + ')' + ':\n' + message) …

我有 Java 背景，对 ReactJS 很陌生。很抱歉，如果这是一个愚蠢的问题，但我已经被这个问题困扰了几天。如果可以的话请帮忙。

我的理解是，React 适用于单页应用程序。在过去的几周里，我做了一些测试开发，并一直在使用 Router 等。但我无法理解如何使用 React 在不同的 URL 上创建不同的内容。这就是我试图模仿的：

1. http://localhost:3000-带有登录框的空白页面
2. http://localhost:3000/home - 顶部有菜单栏的仪表板
3. http://localhost:3000/about - 包含其他信息的页面，但菜单栏与“home”相同

我不希望任何人回复有关如何创建组件/布局的详细信息（我非常熟悉 CSS、HTML 等），我不明白的是如何完全创建一个“单页应用程序”针对不同 URL（路由路径）的不同内容。

如果这是 java，我将对 HTML 进行模板化，并为不同的 URL 提供不同的页面。但这是服务器端的。

我尝试将一个组件分配给不同的路由：<Route path="/home" exact component = {Home} /> 并在该组件中构建内容，但这不起作用（我认为我陷入了 Java 领域，并且仍在考虑“提供”内容）。

当我查看 Facebook（React 提供商）时，似乎顶部的所有菜单操作都在同一页面中打开，但我无法弄清楚如何隐藏不同的组件？并出现？基于点击的不同路线。

也许我完全错了，独特的 HTML 页面用于不同的路线？

请让我知道什么是最佳实践以及我如何实现这一目标。

如果您能给我指点 youtube 视频或一些简化的演练，我将非常非常感激。

我在网上搜索了诸如“不同路线上的不同反应组件”之类的内容，但没有找到任何真正显示其工作原理以及最佳实践的内容。

我有一个输入字段，应该向 mysql 发送一个值，我想设置最大值和最小值来预测用户可以选择的日期范围。

此输入是一个日期时间本地字段，因为我希望他也选择时间。

我知道如何将其设置为日期，但无法让它工作。也许我错过了什么？

这是我的小提琴

  <label>This is datetime-local</label>

<input type='datetime-local' min='2017-06-14 00:00:00' max='2017-06-16 00:00:00'>

  <label>This is date</label>

<input type='date' name="date" min="2017-06-14" max="2017-06-16">

我有一个用 jquery 和 spring mvc 开发的 Web 应用程序...一切都运行良好...但现在我想在我的应用程序中使用 React JS...我想在 React js 中创建一个表单并发送 ajax 请求到我的 spring mvc 控制器...我知道如何使用 jquery 执行此操作，但不知道如何使用 React js...请告诉我一种创建表单并向 spring mvc 控制器发送请求的方法...这是我的我想要获取请求的控制器方法...

@RequestMapping(value = "/saveuser", method = RequestMethod.POST)
    public @ResponseBody String Save(/*@Valid Users user, BindingResult result,*/HttpServletRequest request, Model model, 
            @RequestParam(required = false) Boolean reverseBeforeSave) {
   
        String userName = request.getParameter("username");
        String password = request.getParameter("password");
        String firstName = request.getParameter("first_name");
        String lastName = request.getParameter("last_name");
        System.out.println("save method");
        String[] roleNames = request.getParameterValues("roles");

        userService.saveUserandRoles(userName, password, firstName, lastName, roleNames);
        return "success";
        
    }

我在 StackOverflow …

我一直在研究 TKinter 遇到的这一问题，即根据其他线程的数据更新 GUI。正如许多人在网上建议的那样，我诉诸于使用队列轮询策略和self.root.after()方法。

这工作得很好，但我有一个问题，我需要更新嵌入在 TKinter GUI 中的 matplotlib 图，这样做会“停用”/将焦点从 GUI 的其他方面移开/可能会阻止GUI 的其他方面。具体来说，如果我在 TKinter 条目中输入内容并且 matplotlib 图更新，则光标不再位于条目中，并且我的输入过程已被中断。

为了解决这个问题，我想我应该尝试在一个单独的线程中更新 TKinter。现在，我在网上看到很多人声称TKinter不是线程安全的，但我也看到其他人说它是线程安全的。我继续制作了一个示例程序，它似乎运行得很好：即使绘图更新，光标也可以保留在条目中。但我想知道的是，这个程序安全吗？或者它是否容易出现随机或可预测的故障？我该怎么做才能拥有线程安全的 GUI？

这是我的示例代码：

import Tkinter as tk
import threading
import Queue
import datetime
import math
import matplotlib
matplotlib.use("TkAgg")
from matplotlib.backends.backend_tkagg import FigureCanvasTkAgg, NavigationToolbar2TkAgg
from matplotlib.figure import Figure
import matplotlib.gridspec as gridspec

gui_queue = Queue.Queue()

GUI_THEME_COLOR = 'lightblue'

##################################################
class MainGUI:
    def __init__(self, root):
        self.root = root
        self.root.title('TKinter GUI with Threaded Updates')
        self.root.minsize(width=800, height=300)
        self.root.config(background=GUI_THEME_COLOR) …

当 tkinter 根窗口关闭时，如何杀死已经运行的线程。我能够检测事件，但如果用户尚未启动任何线程，我在关闭窗口时会遇到错误。另外，当关闭时我是否能够检测到线程正在使用函数运行

self.thread.is_alive()

使用什么命令来杀死线程？

import threading
import tkinter as tk
from tkinter import messagebox
import time


class Application(tk.Frame):
    def __init__(self, master=None):
        tk.Frame.__init__(self, master)
        self.pack()
        self.createWidgets()
        self.master.title("myapp")
        master.protocol("WM_DELETE_WINDOW", self.on_closing)

    def createWidgets(self):
        self.btn = tk.Button(self)
        self.btn["text"] = "Start.."
        self.btn.pack()
        self.btn["command"] = self.startProcess

    def startProcess(self):
       self.thread = threading.Thread(target=self.helloWorld, args=("Hello World",))
       self.thread.start()

    def helloWorld(self, txt):
       for x in range(5):
          print (txt)
          time.sleep(5)


    def on_closing(self):
        if messagebox.askokcancel("myapp", "Do you want to quit?"):
            if self.thread.is_alive():
                self.thread.stop()
            self.master.destroy()

def main():
    root = tk.Tk()
    app = Application(master=root) …

axios.get我是 React js 的新手，并尝试使用when componentDidmount从数据库获取数据。这是我试图获取产品的请求。我正在使用 laravel 进行反应。

componentDidMount() {
        axios.get('http://localhost:8000/getproducts')
            .then(response => {
                console.log(response.data);
            });
    }

在控制器中我正在返回数据

public function products()
    {
       $products = Product::all();
       return response()->json($products);
    }

返回响应后，axios.get我得到以下纯 HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Learn React</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link href="http://localhost:8000/css/app.css" rel="stylesheet">
    </head>
    <body>
       <div id="crud-app"></div>

       <script src="http://localhost:8000/js/app.js"></script>
    </body>
</html>

网页.php

<?php


Route::get('{any}', function () {
    return view('welcome');
})->where('any','.*');

Route::get('/', function () {
    return view('welcome');
});

Route::post('save-product', 'ProductController@saveProduct')->name('save.product'); …

我正在尝试使用 apollo 在 React Native 中实现登录。在反应本机应用程序中

const SIGN_IN = gql`
mutation($username: String!, $password: String!) {
  signin(password: $password, username: $username) {
    user {
      username
    }
    token
  }
}
`;

// 代码已缩写。

function LoginScreen() {
  const [signIn, { loading, error }] = useMutation(SIGN_IN, {
    onCompleted({ data }) {
      if (loading) console.log("Loading.....");
      console.log("Printing data");
      console.log(data.signin.token);
      }
  });
}

后端服务器运行良好。但我在控制台日志中收到错误消息

    [Unhandled promise rejection: TypeError: Cannot read property 'signin' of undefined]

    Stack trace:
    screens/LogInScreen.js:36:6 in useMutation$argument_1.onCompleted
    node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:635:25 in callOncomplete

数据未定义。 所以我尝试了{ data && console.log(data.signin.token) …

我有两种按钮，一个普通的 html 按钮和另一个自定义按钮。我只能在普通按钮上使用 onClick，但另一个不起作用。我有的自定义按钮：

import React from 'react'
import  './custom-button.styles.scss'

function CustomButton({children,isGoogleSignIn,...buttonProps}) {
    return (
        <button className={`${isGoogleSignIn? 'google-sign-in':''} custom-button`}>
            {children}
        </button>
    )
}

export default CustomButton

我使用它的代码：

<button onClick={() => alert("Normal button")}>Click me</button>
<CustomButton onClick={() => alert("Custom button")}>Click me</CustomButton>