相关疑难解决方法(0)

我不明白它们的区别,它们看起来都是一样的,但我猜它们不是.

任何何时使用其中一个或另一个的例子都将受到赞赏.

我在事件处理程序中捕获输入值,如下所示:

import React from 'react';

export class Newsletter extends React.Component {
    handleClick(event) {
        let newsletterId = event.target.value;
        console.log(newsletterId);
    }

    constructor(props) {
        super(props);
        this.state = {
            newsletter: this.props.newsletter,
        }
    }

    render() {
        return (
            <div className="col-sm-4 col-xs-12">
                 <button onClick={this.handleClick.bind(this)}
                                value={this.state.newsletter.pk}>
                         <span className="fa fa-arrow-right"></span> 
                 </button>
            </div>
        )
    }
}

这表现得很奇怪.目标值有时会变成undefined.有时我得到了正确的newsletterId,有时我得到了undefined.请参见下面的截图:

然后,我改变event.target.value来event.currentTarget.value.现在它运作顺利.

所以,问题出现了,这个场景event.target.value和之间的区别是什么event.currentTarget.value？

我正在使用HTML和JavaScript制作拖放系统.我会将任务(div元素)从"待办事项"列拖到"正在开发"中,反之亦然.我遇到的唯一问题是你可以将任务拖放到另一个任务中而我不会.

这是开始的情况:

这是拖放之后:

现在我将阻止用户将任务2拖放到任务1中.我怎么能这样做？您可以在下面找到我的代码.

提前致谢.

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

table {
  font-family: "Segoe UI", sans-serif;
  border-collapse: collapse;
}
table,
th,
td {
  border: 1px solid gray;
  padding: 10px;
}
th {
  background-color: lightgray;
}
th,
td {
  width: 33.33%;
}
td {
  min-height: 80px;
}
.post-it {
  background-color: yellow;
  padding: 10px 5px;
  margin: 5px;
  margin-bottom: 20px;
  box-shadow: 5px 5px 5px gray; …

我正在使用div需要可点击的卡片形状。我使用 JS (stimulusJS) 向EventListener它们添加 ，以便当用户单击卡片时，事件侦听器被触发，添加一些 CSS 类并使用来自 s divdataSet 的数据填充一些隐藏字段。

卡片

<div class="card d-flex flex-column data-selectable-target="selectable" data-pricing-model-value="flat_fee">
   <div class="self-end">
      <strong>
        <span class="mr-3" data-toggle="tooltip" title="<%= t(".tooltip") %>"><%= icon("exclamation-circle", classes: "h-4 w-4") %></span>
      </strong>
   </div>
   <h5><%= t(".title") %></h5>
   <p> <%= t(".description") %></p>
</div>

JS控制器

import { Controller } from 'stimulus';

export default class extends Controller {
  static targets = ["selectable"]

  connect() {
    this.selectableTargets.forEach((element) => {
      element.addEventListener("click", (event) => {
        this.select(event.target);
      });
    })
  }

  select(element) {
    element.classList.add("selected")
    this.selectableTargets.forEach((target) …

此流星客户端代码需要事件发生的元素的宽度，但未能获取它。如何做呢？谢谢

Template.swipe.events({
  'mouseup .swipe': function(e) {
    utility.mouseUp(e);
  }
});

utility = (function () {

  return {
    mouseUp: (event) => {
      console.log(event.currentTarget.width);
    }
}());

TL;DRObject.getPrototypeOf(e.target)返回HTMLInputElement，但编译器说该类型是EventTarget

Long：我有一个简单的输入

      <input
        className="FilterInput"
        type="text"
        placeholder="Search for names..."
        onKeyUp={filter}
      />

以及管理过滤器的功能

    const filter = (e: React.KeyboardEvent<HTMLInputElement>) => {
        console.log(Object.getPrototypeOf(e.target)) // prints "HTMLInputElement"
        console.log((e.target as HTMLInputElement).value);
        // ... other code
    }

我试图更好地理解 Typescript 类型管理背后的理论，但是我不明白为什么我必须输入提示

(e.target as HTMLInputElement).value

在第二console.log。

如果我不这样做，编译器（编译时）会说Property 'value' does not exist on type 'EventTarget'.。所以这意味着在编译时的类型e.target是EventTarget。

但是，在运行时使用 进行测试时Object.getPrototypeOf(e.target)，类型为HTMLInputElement（具有该value属性）。

为什么会发生这种情况？这是我的代码中的错误吗？是与 React 有关的错误，还是我缺少的 Typescript 类型管理理论的某些部分？

此外，参数声明中的泛型类型指示（例如：React.KeyboardEvent< HTMLInputElement >）难道还不够吗？

谢谢

我知道这可以用jQuery完成,如下所示:如何让click事件仅在父DIV上激活,而不是孩子？

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;

  alert( 'clicked the foobar' );
});

但是在角度上,this当我使用类似的东西时,关键字没有绑定到元素:

<div ng-dblclick="ctrl.doubleClickHandler($event)">
    parent, event should fire here.
    <div>child, event should not fire here.</div>
</div>

在我的控制器中:

this.doubleClickHandler = doubleClickHandler;
function doubleClickHandler(event) {
  console.log(this); // this binds to controller
  console.log(event);
}

事件触发,但是当我点击元素的子元素时,我需要阻止它触发.

我不想对event.target基于类或属性的检查进行硬编码,因为它可能会在以后更改.无论如何在HTML标签中实现这一点,或者在JavaScript中没有硬编码元素的类或属性(类似于this在jQuery 中绑定关键字的技术)？

我计划制作一个state在单击时更新的按钮。按钮内部有一个img和div。onClick当我单击按钮时 on 触发，但当我单击 或 时则不img触发div。任何人都知道如何解决这个问题，因为我希望用户单击按钮上的任意位置（包括 和img）div。我的 jsx 代码是：

<div
                className={
                  'flex flex-row flex-wrap justify-around border-2 rounded border-dashed'
                }>
                {categoryLeft.map((category) => (
                  <button
                    onClick={this.addCategory}
                    type='button'
                    value={category}
                    name={category}
                    className={
                      'flex bg-teal-600 my-2 mx-1 w-auto h-auto hover:bg-teal-400 text-white font-bold px-1 rounded'
                    }>
                    <div className={'self-center'} value={category}>
                      {category}
                    </div>
                    <img
                      className={'float-right ml-1 self-center w-5 h-5'}
                      value={category}
                      src={CloseImg}
                    />
                  </button>
                ))}
              </div>
            </div>

我的方法是：

 addCategory = (e) => {
    console.log(e.target); …

当我尝试访问其输入目标并获取其值时，我的 vscode 在输入 onKeyUp 函数中出现错误。

import React from 'react';

import styles from './styles.module.scss';

export function Step3() {
    function handleKeyUp(e: React.KeyboardEventHandler<HTMLInputElement>) {
        console.log(e.target.value);
    }

    return (
        <div className="d-flex justify-content-between">
            <input
                type="text"
                className="f-size-30 mt-3"
                name="name"
                placeholder="Type your name"
                onKeyUp={handleKeyUp}
            />
        </div>
    );
}

我的“e”参数应该是什么类型？

我似乎无法弄清楚如何解决这个问题，如果您单击带有子图标fontawesome的react-bootstrap按钮，该按钮onclick target value将是未定义的。

但是，如果您仅在带有图标的文本外部单击并且仍在按钮内部，则onclick处理程序仍将起作用。

https://jsfiddle.net/utmcykcg/5/