Question

我是新手，所以请怜悯我;-)。我有以下可运行的代码段示例：

＆＃13;

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.selected = false;
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.selected = true;
  }

  render(){
    return <button onClick={this.handleClick}>{this.selected.toString()}</button>;
  }
}

ReactDOM.render(
  <Test/>,
  document.getElementById('container')
);

＆＃13;

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

这应该呈现来自＆＃39; false＆＃39;的按钮文字。单击按钮时，单击“真实”。但它并没有。有人可以向我解释，一个有效的例子是什么样的？

Answer 1

正常变量不会重新渲染组件。您需要维护组件state。每当您通过state功能更改setState时，该组件将重新呈现，更改将反映在页面上。

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {selected: false};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // Always use setState to set the state
    this.setState({selected: true});
  }

  render(){
    return <button onClick={this.handleClick}>{this.state.selected.toString()}</button>;
  }
}

Answer 2

我不确定你为什么不在你的例子中使用状态，但这会有所帮助。

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

    this.state = {
      selected: false
    }

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

 handleClick() {
  this.setState({selected: !this.state.selected});
 }

 render(){
  return <button onClick={this.handleClick}>{this.state.selected}</button>;
 }
}

了解Reactjs渲染和事件处理。一个简单的按钮切换

2 个答案: