Ask an error question in the reaction.

The error Uncaught TypeError: Cannot read property 'bind' of undefined appears.

<html>
  <head>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/menu.min.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/button.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/form.min.css"/>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js" charset="utf-8"></script>
    <title></title>
  </head>
  <body>
    <header>
      <div class="ui top inverted massive menu">
        <h6 class="header item">Leaduck</h6>
        <a class="item" href="/">Home</a>
        <div class="right menu">
          <div class="item">
            <a href="/users/logout" class="ui primary button large">Logout</a>
          </div>
        </div>
      </div>
    </header>
    <div class="container" id="container"></div>
    <script src="/lib/js/comment-es6.js" charset="utf-8" type="text/javascript"></script>
  </body>
</html>

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '',
      text: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangetitle(event) {
    this.setState({title: event.target.title});
  }

  handleChangetext(event) {
    this.setState({text: event.target.text});
  }

  handleSubmit(event) {
    axios({
      method: 'post',
      url: '/commentpost',
      data: {
        title: this.state.title,
        text: this.state.text
      }
    }).then(function (response) {
      alert('success');
    }).catch(function (error) {
      alert('error');
    });
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
         <div class="ui inverted segment">
           <h1 class="ui left floating header">Ask questions</h1>
         </div>
         <div class="ui form">
          <div class="field six wide">
            <label>Title</label>
            <input type="text" class="title" value={this.state.title} onChange={this.handleChangetitle} />
          </div>
          <div class="field six wide">
           <label>Content</label>
           <textarea cols="1" class="text" value={this.state.text} onChange={this.handleChangetext}></textarea>
           </div>
            <br />
            <Button onClick="submit()"class="hugeui primary button">Ask </Button>
         </div>
      </form>
    );
  }
}

ReactDOM.render(<App />, document.getElementsById('container'));

react javascript

2022-09-22 20:06

1 Answers

When using ES6 class, React does not autobind this.

There are many ways to solve this problem.

Use of React.createClass(...): automatically binds this to the component. However, it is not recommended for the emergence of ES6 classes.

Bind directly within render(): In the example above,

 value={this.state.title} onChange={this.handleChangetitle.bind(this)}

This is how you use it. However, it affects the performance because the binding is carried out every time the rendering is performed.

 value={this.state.title} onChange={e => this.handleChangetitle(e)}

constructor(props) {
    super(props);
    this.handleChangetitle.bind(this)
}

You can bind it to a constructor like this!

  handleChangetext = (event) =>  {
    this.setState({text: event.target.text});
  }

2022-09-22 20:06

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656