0

I have a react component in meteor with a webform in. The following code works fine and prints hello addtile in the console:

export default  class NewTileForm extends Component {
  addTile(event){
    event.preventDefault();
    console.log("hello addtile")
  }
 render(){
    return(
        <div>
          <form className="tile-new" onSubmit={this.addTile.bind(this)}>
            <input  type="text"
                    ref="tile"
                    placeholder="Tile Title"/>
          </form>
        </div>
     )
  }
}

However, if I try to add a input to the webform I get no response from the console log:

 export default  class NewTileForm extends Component {
  addTile(event){
    event.preventDefault();
    console.log("hello addtile")
  }
 render(){
    return(
        <div>
          <form className="tile-new" onSubmit={this.addTile.bind(this)}>
            <input  type="text"
                    ref="tile"
                    placeholder="Tile Title"/>
            <input  type="text"
                    ref="company"
                    placeholder="Tile Company"/>
          </form>
        </div>
     )
  }
}

What am I missing?

Gerrie van Wyk
  • 679
  • 8
  • 27
  • how are you submitting the form? with the enter key?. Also, what happens the other way (include company, but remove tile) – Chris May 12 '16 at 14:21
  • I'm submitting with enter. and if I remove tile and include company only, it works as well.. But with two input field it does not work. – Gerrie van Wyk May 12 '16 at 14:52

1 Answers1

0

This is "a browser thing" - you can't submit a form with the enter key and without a submit or button. No it's not react specific. To be honest, not sure why it worked with one - not sure the caveat there.

Anywho, Stackoverflow has lots of answers about tackling this issue (when you remove react as the problem):

Submitting a form by pressing enter without a submit button

Community
  • 1
  • 1
Chris
  • 54,599
  • 30
  • 149
  • 186