You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
806 B
36 lines
806 B
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
|