React快速入门

在React中，我们可以通过使用组件的状态（state）和事件处理器（event handler）来实现交互性。

一、状态（State）

在组件内部定义一个初始状态（initial state）。可以通过构造函数（constructor）或者使用React的钩子函数（hook）useState来定义状态。
使用this.state来获取组件的当前状态，使用this.setState来更新组件的状态。setState接受一个新的状态对象，并将其合并到当前状态中。
在组件的render方法中，可以使用this.state来获取当前状态的值。
?

// 使用class组件定义一个包含状态的组件
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}
 
// 使用函数组件定义一个包含状态的组件
function Counter() {
  const [count, setCount] = useState(0);
  
  function increment() {
    setCount(count + 1);
  }
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

二、事件处理器（Event Handler）

在React中，可以通过在JSX中定义on事件来绑定事件处理器。例如，onClick用于绑定鼠标点击事件。
事件处理器是一个函数，可以通过箭头函数或者在构造函数中绑定this来定义。
事件处理器有一个event参数，可以用来获取触发事件的相关信息。
?

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
    // 在构造函数中绑定this来确保事件处理器中的this正确指向组件实例
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({ name: event.target.value });
  }
  
  render() {
    return (
      <div>
        <input type="text" value={this.state.name} onChange={this.handleChange} />
      </div>
    );
  }
}