javascript - React.js Expected onSubmit listener to be a function, instead got type boolean - Stack Overflow

admin管理员组

文章数量:1405727

Can someone please tell me what the hell I am doing wrong here? I am pretty new to React, and everything I have read says that this should work. I am trying to call the function "addItem" when the form is submitted, however the console.log throws the error "Expected onSubmit listener to be a function, instead got type boolean" on page load. Thanks!

import React, { Component } from 'react';
import App from "./App"
import List from "./List"


class AddTodo extends Component{
  constructor(){
    super();
    this.state = {
      items: []
    }
  }
  addItem(e){
    var itemArray = this.state.items;
    itemArray.push({
      text: this._inputElement.value,
      key: Date.now()
    })
    this.setState({
      items: itemArray
    })
    this._inputElement.value = "";
    console.log(itemArray)
    e.preventDefault()
  }
  render(){
      return(
        <div className="box-wrapper">
          <form onSubmit={this.addItem.bind(this)}>
            <input href={(a) => this._inputElement = a} placeholder={this.props.placeHolder} type="text"></input>
            <button type="submit">Submit</button>
          </form>
          <List entries={this.state.items} />
        </div>
      )
  }
}

export default AddTodo;

Can someone please tell me what the hell I am doing wrong here? I am pretty new to React, and everything I have read says that this should work. I am trying to call the function "addItem" when the form is submitted, however the console.log throws the error "Expected onSubmit listener to be a function, instead got type boolean" on page load. Thanks!

import React, { Component } from 'react';
import App from "./App"
import List from "./List"


class AddTodo extends Component{
  constructor(){
    super();
    this.state = {
      items: []
    }
  }
  addItem(e){
    var itemArray = this.state.items;
    itemArray.push({
      text: this._inputElement.value,
      key: Date.now()
    })
    this.setState({
      items: itemArray
    })
    this._inputElement.value = "";
    console.log(itemArray)
    e.preventDefault()
  }
  render(){
      return(
        <div className="box-wrapper">
          <form onSubmit={this.addItem.bind(this)}>
            <input href={(a) => this._inputElement = a} placeholder={this.props.placeHolder} type="text"></input>
            <button type="submit">Submit</button>
          </form>
          <List entries={this.state.items} />
        </div>
      )
  }
}

export default AddTodo;

• javascript
• html
• reactjs

Share Improve this question Follow edited Feb 15, 2017 at 3:13 Ian Springer asked Feb 15, 2017 at 3:08 Ian SpringerIan Springer 23322 gold badges77 silver badges2020 bronze badges 3

• On your button, you only pass the prop onSubmit which is a boolean (true). You need to pass a handler which is a function. – Andrew Li Commented Feb 15, 2017 at 3:10
• You don't need two onSubmits. It's either you set it up on your form, or you do one for your button. – John Chen Commented Feb 15, 2017 at 3:15
• I have since corrected the typo. Still not working, any ideas? – Ian Springer Commented Feb 15, 2017 at 3:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try changing your render and addItem to something like this:

  addItem(e){
    e.preventDefault();
    {/* add the rest of the function here */}
  }
  render(){
    return(
      <div className="box-wrapper">
        <form onSubmit={this.addItem.bind(this)}>
          <input
            href={(a) => this._inputElement = a}
            placeholder={this.props.placeHolder}
            type="text"
          />
          <button type="submit" onClick={this.addItem.bind(this)}>Submit</button>
        </form>
        <List entries={this.state.items} />
      </div>
  )

}

I made two important changes:

1. Added e.preventDefault(); to the addItem method, which will prevent default behavior.

2. Added an onClick handler to the "submit" button, with the addItem method passed in as the target executable.

First have to remove event.preventDefault .It is restricting the default behaviour of the webpage.Add a onClick event listener to the submit so that the function executes on button click.

`import React, { Component } from 'react';
import App from "./App"
import List from "./List"


class AddTodo extends Component{
  constructor(){
    super();
    this.state = {
      items: []
    }
  }
  addItem(e){
    var itemArray = this.state.items;
    itemArray.push({
      text: this._inputElement.value,
      key: Date.now()
    })
    this.setState({
      items: itemArray
    })
    this._inputElement.value = "";
    console.log(itemArray)
   //  e.preventDefault(); remove this prevent default
  }
  render(){
      return(
        <div className="box-wrapper">
          <form onSubmit={this.addItem.bind(this)}>
            <input href={(a) => this._inputElement = a} placeholder={this.props.placeHolder} type="text"></input>
            <button type="submit" onClick={this.addItem.bind(this)}>Submit</button>
          </form>
          <List entries={this.state.items} />
        </div>
      )
  }
}

export default AddTodo;`

I am not getting any error. But you should put the preventDefault at the top of the addItem, this will prevent from page reload. There is better way to handle the input value by assigning ref attribute to input and accessing via this.refs.refName.

addItem(e) {
  e.preventDefault(); //To prevent the page reload on submit

  var itemArray = this.state.items;

  itemArray.push({
    text: this.refs.inputElement.value
  });

  this.refs.inputElement.value = ""; // clearing the value
}

render() {
  return( 
    <div>
      <form onSubmit={this.addItem.bind(this)} >
        <input ref="inputElement" placeholder={this.props.placeHolder} type="text"/>
        <button type="submit">Submit</button> 
      </form>
      {
        this.state.itemArray.map((item) => {
          return(<span>{item}</span>)
        })
      }
    </div>
  );
}

本文标签：