Увеличение значений реакции

Question

Я новичок в реакцииJS.Я пытаюсь создать кнопку и увеличить значение в тексте. Я пытаюсь создать кнопку, которая увеличивает значение с помощью реакции и отображает

import React from 'react'
import ReactDom from 'react-dom'

class App extends React.Component {

   constructor(props){
       super(props);
       this.state = {counter: 1}
   }


 increment (e) {
   e.preventDefault();
   this.setState({
   counter : this.state.counter + 1
   });
 }

   render() {
    return  <button onClick={this.increment}> "this is a button " + {this.state.counter} </button>
   }

}

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

Answer 1

Вам необходимо правильно связать increment

class App extends React.Component {
   constructor(props){
       super(props);
       this.state = {counter: 1}
   }


 increment(e){
   e.preventDefault();
   this.setState({
   counter : this.state.counter + 1
   });
 }

   render() {
    return  <button onClick={(e)=>this.increment(e)}> this is a button {this.state.counter} </button>
   }

}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>

Answer 2

Попробуйте изменить render:

return (
  <button onClick={this.increment}>this is a button {this.state.counter}</button>
);