01-表单基本操作——将状态值绑定到表单输入域中-value & 监听表单输入域的内容变化-onChange

表单基本操作——将状态值绑定到表单输入域中-value & 监听表单输入域的内容变化-onChange

• 受控组件

  • value={this.state.uname}
  • onChange={this.handleUname}

  <input value={this.state.uname} onChange={this.handleUname} type="text" />
  

  handleUname = (e) => {
      this.setState({
        uname: e.target.value
      })
  }
  

实例

第一步：src下新建文件夹components，下面新建01.js

/*
  表单基本操作

  受控组件用法
  1、将状态值绑定到表单输入域中 value
  2、监听表单输入域的内容变化 onChange
*/
import React from 'react'

class TestForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      uname: ''
    }
  }
  handleUname = (e) => {
    // 当表单输入域内容发生变化时触发该函数，那么可以对状态中的数据进行更新
    this.setState({
      uname: e.target.value
    })
  }
  handleSubmit = () => {
    console.log('submit---' + this.state.uname)
  }
  render () {
    return (
      <div>
        <div>测试表单操作</div>
        <div>
          用户名：
          <input type="text" value={this.state.uname} onChange={this.handleUname}/>
          {/*<input type="text" v-model='uname'/>*/}
          {/*<input type="text" :value='uname' @input='handleUname'/>*/}
        </div>
        <div>
          <button onClick={this.handleSubmit}>提交</button>
        </div>
      </div>
    )
  }
}

export default TestForm

第二步：App.js中进行引入

import React from 'react';
import './App.css';
import TestForm from './component/01.js'

function App () {
  return (
    <div>
      {<TestForm/>}
    </div>
  )
}

export default App;

npm run start打开界面，显示