看react的文档教程的第三天

这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

学的很慢,这react的相关教程

给组件添加交互功能

按照文档上说的

接下来我们试着让棋盘的每一个格子在点击之后能落下一颗 “X” 作为棋子。 首先，我们把 Square 组件中 render() 方法的返回值中的 button 标签修改为如下内容：

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

这个方法,很明显是在九个小格子按钮上绑定了点击事件,每当我点一下就会在控制台输出click这个字符串.

继续跟着教程上面的做 注意 为了少输入代码，同时为了避免 this 造成的困扰，我们在这里使用箭头函数 来进行事件处理，如下所示：

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

也就是说这两种是等价的,

onclick={function() {console.log('click')}}
onclick={() =>console.log('click')}

教程又说了,注意：此处使用了 onClick={() => console.log('click')} 的方式向 onClick 这个 prop 传入一个函数。 React 将在单击时调用此函数。但很多人经常忘记编写 () =>，而写成了 onClick={console.log('click')}，这种常见的错误会导致每次这个组件渲染的时候都会触发控制台输出。

那我就写成那样试试

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

重新打卡页面,清除掉所有的控制台记录,再次刷新页面,可以看到

9clicks, 说明确实如教程上所说当组件渲染时就会出现向控制台输出的情况.

接下来，我们希望 Square 组件可以“记住”它被点击过，然后用 “X” 来填充对应的方格。我们用 state 来实现所谓“记忆”的功能。 操作方法是,向square类中添加构造方法添加this.state 初始化state

• 在 <button> 标签中，把 this.props.value 替换为 this.state.value。
• 将 onClick={...} 事件监听函数替换为 onClick={() => this.setState({value: 'X'})}。
• 为了更好的可读性，将 className 和 onClick 的 prop 分两行书写。 效果为:

好诶,今天周末就整到这里了,看电视剧去了