Question

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

 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>

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

这是whole code

Answer 1

这里有三个不同的问题。

您正尝试在click的结果上致电getElementsByClassName。那returns a collection of elements，而不仅仅是一个元素。 click函数存在于元素上，而不是它们的集合。
调用按钮上的click函数不会触发React的onClick处理程序。*
通过DOM间接工作根本不是你在React中做事的方式。（而且在非React代码中也很糟糕。）

相反，只需从this.submitMessage处理程序中调用keyup：

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>

.click（）在反应中不起作用

1 个答案: