狀態事件和管理控制

這是一個帶有託管輸入欄位的 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？

你可以在此處進行更多實驗以找到答案