javascript - 单击按钮时提醒输入框内容 - React

Question

我正在 React 中制作一个简单的程序，用于在单击按钮时提醒输入框的内容。我不能这样做。有人可以帮我吗？我来自 Angular 背景!

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

您的代码存在一些问题。状态和 alpha 函数不应该位于渲染内部，并且您需要初始化状态并在构造函数中绑定(bind) alpha 函数，以便从类的其余部分访问它们。以下重构的代码应该适合您:

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>
    );
  }
}