单击按钮时输入框的警报内容-React

Question

I am making a simple program in React to alert the content of input box on the click of a button. I cannot do that. Can someone help me out please? I am from Angular background!

 class App extends React.Component { render() { this.state = { text1: "hello" } return ( <div> <input type="text" value={this.state.text1}/> <button onClick={alpha}>Click</button> </div> ) alpha(){ alert(this.state.text1); } } } ReactDOM.render(<App/>, document.getElementById('app')); 

 <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> <div id="app"></div> 

Answer 1

You have a few issues with your code. The state and alpha function should not be inside render, and you'll need to initialize your state and bind the alpha function in the constructor to access them from the rest of your class. The following refactored code should work for you:

class App extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
          text1: "hello"
      };

      this.alpha = this.alpha.bind(this);
  }

  alpha() {
    alert(this.state.text1);
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.text1} />
        <button onClick={this.alpha}>Click</button>
      </div>
    );
  }
}