.click() doesn't work in react

Question

I guess .click function comes from jquery but I saw it in pure js too so I hope I can use it in my react code too. The event where I want to use it looks like

 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>

The idea is after writing message I will push enter, onKeyUp will get it go to event handler and run getElementByClassName().click() and submit the message(run onClick). If I am wrong and I can't use click in react how can I implement it? both console.logs are working correctlly so the problem is in click()(I guess)

And here is the whole code

Answer 1

There are three separate problems here.

1. You're trying to call click on the result of getElementsByClassName. That returns a collection of elements, not just one element. The click function exists on elements, not collections of them.

2. Calling that click function on the button will not trigger React's onClick handler.*

3. Working indirectly through the DOM is fundamentally not how you do things in React. (And it's poor practice in non-React code too.)

Instead, just call this.submitMessage from your keyup handler:

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

Simplified example:

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>

---

* Proof of Issue #2 above, in case others are unsure (like me, until I tried it):

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>