交互式组件

这一步，让Square组件实现这样的效果：你点击它，就会填进去一个“X”。试着修改 Square组件的render()函数返回的button标签，改成这样：

code

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

现在，如果你点击小方格，浏览器应该会跳出一个弹窗。

这里使用了JavaScript的新语法：箭头函数。需要注意的是，我们把一个函数作为cnClick的属性传了进去。如果执行的是onClick={alert('click')}，那么，弹窗会立即出现，而不是在点击后才出现。

React组件能够通过在constructor中设置this.state来拥有状态（state），这种状态是组件私有的。现在，我们把小方格里的当前值存入 state，然后在小方格 被点击时，改变这个值。

首先，在类中，添加一个constructor，来初始化state。

code

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
   render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

在JavaScript类中，定义子类的constructor的时候，需要显示地调用super()函数。

现在，改写Square组件的render方法，以实现点击后，把当前状态值显示出来的功能：

• 把<button>标签中的this.props.value换成this.state.value
• 把() => alert()事件处理器改为() => this.setState({value: 'X'})

现在的button标签看起来是这个样子：

code

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {this.state.value}
      </button>
    );
  }
}

无论何时调用this.setState，组件都会立即触发更新，使React合并传进来的新状态，并渲染组件和它的子组件。渲染后，this.state.value的值会变成X，所以格子里会出现X。

点击任何一个小方块，都会出现X。

查看最新一步的代码