javascript - .click() 在 react 中不起作用

标签 javascript reactjs

我猜 .click 函数来自 jquery 但我在 pure js 中看到了它也是,所以我希望我也可以在我的 react 代码中使用它。我想使用它的事件看起来像

 keyUpFunction(event) {
    console.log(event.keyCode);
    event.preventDefault();
    if(event.keyCode == 13) {
        console.log("blya");
        document.getElementsByClassName('button').click();
    };
}
...
<input onChange={this.updateMessage} onKeyUp={this.keyUpFunction} value={this.state.message} type='text' placeholder="Message" />
<button className="button"  onClick={this.submitMessage} >Submit Message</button>

我的想法是在写完消息后按下回车键,onKeyUp 将它转到事件处理程序并运行 getElementByClassName().click() 并提交消息(运行 onClick)。如果我错了,我不能使用 click in react,我该如何实现呢?两个 console.logs 都正常工作,所以问题出在 click()(我猜)

这里是 whole code

最佳答案

这里有三个独立的问题。

  1. 您正在尝试对 getElementsByClassName 的结果调用 click。那returns a collection of elements ,不只是一个元素。 click 函数存在于元素上,而不是它们的集合。

  2. 调用按钮上的 click 函数不会触发 React 的 onClick 处理程序。*

  3. 通过 DOM 间接工作根本不是您在 React 中做事的方式。 (这在非 React 代码中也是不好的做法。)

相反,只需从您的 keyup 处理程序调用 this.submitMessage:

keyUpFunction(event) {
    event.preventDefault();
    if(event.keyCode == 13) {
        console.log("blya");
        this.submitMessage(event); // ****
    };
}

简化示例:

class Input extends React.Component {
  constructor(...args) {
    super(...args);
    this.doSomething = e => {
      console.log("Do something");
    };
    this.keyup = e => {
      if (e.keyCode === 13) {
        this.doSomething(e);
      }
    };
  }
  render() {
    return (
      <div>
        <input className="button" type="text" onKeyUp={this.keyup} />
        <input type="button" onClick={this.doSomething} value="Click Me" />
      </div>
    );
  }
}

ReactDOM.render(
  <Input />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>


* 以上问题 #2 的证明,以防其他人不确定(像我一样,直到我尝试过):

class Input extends React.Component {
  constructor(...args) {
    super(...args);
    this.doSomething = e => {
      console.log("Do something");
    };
    this.keyup = e => {
      if (e.keyCode === 13) {
        console.log("Calling `click`");
        document.querySelector(".button").click();
      }
    };
  }
  render() {
    return (
      <div>
        <input className="button" type="text" onKeyUp={this.keyup} />
        <input type="button" onClick={this.doSomething} value="Click Me" />
      </div>
    );
  }
}

ReactDOM.render(
  <Input />,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

关于javascript - .click() 在 react 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43569385/

相关文章:

reactjs - redux-form v6 显示选择字段的验证错误

javascript - 在没有 viewModel 的情况下使用 ko.observable 数组

javascript - 不属于特定类的 JQuery 复选框选择器

javascript - jQuery "$ is not a function"错误

javascript - 在换行符后对文本框中的文本进行切片

javascript - React JS,停止生产中显示错误

Javascript , JQ 数据类型冲突

javascript - 使用 JavaScript 检查 HTML 文档中的事件元素

javascript - 在哪里保存 api 的 JSON 响应?

javascript - 如何使用nginx在express上自动访问https协议(protocol)