状态事件和管理控制

这是一个带有托管输入字段的 React 组件的示例。只要输入字段的值发生更改，就会调用事件处理程序，该事件处理程序使用输入字段的新值更新组件的状态。在事件处理程序中调用 setState 将触发调用 render 更新 dom 中的组件。

import React from 'react';
import {render} from 'react-dom';

class ManagedControlDemo extends React.Component {

  constructor(props){
    super(props);
    this.state = {message: ""};
  }

  handleChange(e){
    this.setState({message: e.target.value});
  }

  render() {
    return (
      <div>
        <legend>Type something here</legend>
          <input 
            onChange={this.handleChange.bind(this)} 
            value={this.state.message} 
            autoFocus />
        <h1>{this.state.message}</h1>
      </div>
   );
  } 
}

render(<ManagedControlDemo/>, document.querySelector('#app'));

注意运行时行为非常重要。每次用户更改输入字段中的值

• handleChange 将被召唤等等
• setState 将被召唤等等
• render 将被召唤

在输入字段中键入字符后，弹出测验，哪些 DOM 元素更改

1. 所有这些 - 顶级 div，图例，输入，h1
2. 只有输入和 h1
3. 没有
4. 什么是 DOM？

你可以在此处进行更多实验以找到答案