React/practise/16.受控组件.jsx

import React from 'react'

class Counter extends React.Component {
  // 1.声明用来控制 input value 的 react 组件自己的状态
  state = {
    message: 'this is message',
  }

  // 回调函数
  inputChange = (e) => {
    console.log('change事件触发了', e)
    // 4.拿到输入框最新的值，交给 state 中的 message
    this.setState({
      message: e.target.value,
    })
  }

  // 产出 UI 模板结构
  render() {
    return (
      // 2.给 input 框的 value 属性绑定 react state
      // 3.给 input 框绑定一个 change 的事件，为了拿到当前输入框中的数据
      <input
        type="text"
        value={this.state.message}
        onChange={this.inputChange}
      />
    )
  }
}

function App() {
  return <Counter></Counter>
}

export default App