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

您的代码有一些问题。 state和alpha函数不应位于render内部，并且您需要初始化状态并在构造函数中绑定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>
    );
  }
}

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

1 个答案: