前端面试宝典

事件处理示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>state</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script type="text/babel">
      // 事件处理示例
      class MyButton extends React.Component {
        constructor(props) {
          super(props);
          // 绑定事件处理函数的 this
          this.click = this.click.bind(this);
        }

        // 事件触发函数
        click() {
          alert(this.props.title);
        }

        render() {
          return <button onClick={this.click}>{this.props.title}</button>;
        }
      }

      ReactDOM.render(
        <MyButton title="我是按钮的标题" />,
        document.getElementById("example")
      );
    </script>
  </body>
</html>

组件内部状态state

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="example"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>

    <script type="text/babel">
      // 练习: 定义一个 CheckBox 组件，选择复选框时文本显示 true，取消选择显示 false
      // state 和 props 的区别: props 是只读属性，state 是组件内部可修改的状态

      class CheckBox extends React.Component {
        // 构造函数初始化 state
        constructor(props) {
          super(props);
          this.state = {
            isCheck: false,
          };
          // 绑定 this 上下文
          this.click = this.click.bind(this);
        }

        click() {
          // 使用 setState 修改状态
          this.setState({
            isCheck: !this.state.isCheck,
          });
        }

        render() {
          return (
            <div>
              <input type="checkbox" onClick={this.click} />
              <span>{this.state.isCheck ? "true" : "false"}</span>
            </div>
          );
        }
      }

      ReactDOM.render(<CheckBox />, document.getElementById("example"));
    </script>
  </body>
</html>

实时显示输入内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="container"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 (替代browser.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>

    <script type="text/babel">
      // 练习: 实时显示输入内容
      class Input extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            content: "",
          };
          // 绑定事件处理函数的 this
          this.change = this.change.bind(this);
        }

        change(event) {
          // 通过 event.target 获取输入框的值
          console.log(event.target.value);
          this.setState({
            content: event.target.value,
          });
        }

        render() {
          return (
            <div>
              <input type="text" onChange={this.change} />
              <p>{this.state.content}</p>
            </div>
          );
        }
      }

      ReactDOM.render(<Input />, document.getElementById("container"));
    </script>
  </body>
</html>