14-受控组件和非受控组件使用

一 受控组件的基本使用

import React, { PureComponent } from 'react';

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      username: ''
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={ e => this.handleSubmit(e) }>
          <label htmlFor="username">
            {/*受控组件*/}
            用户：<input type="text"
                        id='username'
                        value={ this.state.username }
                        onChange={ e => this.handleChange(e)}/>
          </label>
          <input type="submit" value="提交" />
        </form>
      </div>
    );
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log(this.state.username)
  }

  handleChange(e) {
    console.log(e.target.value)
    this.setState({
      username: e.target.value
    })
  }
}

export default App;

 二 受控组件-select使用

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-18 00:20:50
 * @LastEditTime: 2022-10-18 00:54:46
 */
import React, { PureComponent } from 'react';
class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      fruits: '西瓜'
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={ e => this.handleSubmit(e) }>
          <label htmlFor="username">
            {/*受控组件*/}
            <select name="fruits"
                   onChange={e=>this.handleChange(e)}
                   value={this.state.fruits}>
              <option value="香蕉" label="香蕉"></option>
              <option value="苹果" label="苹果"></option>
              <option value="西瓜" label="西瓜"></option>
            </select>
          </label>
          <input type="submit" value="提交" />
        </form>
      </div>
    );
  }
  handleSubmit(e) {
    e.preventDefault();
    console.log(this.state.fruits)
  }
  handleChange(e) {
    console.log(e.target.value)
    this.setState({
      fruits: e.target.value
    })
  }
}

export default App;

三 受控组件-多参数使用

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-18 00:33:11
 * @LastEditTime: 2022-10-18 00:56:30
 */
import React, { PureComponent } from 'react';

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: '',
      age: ''
    }
  }
  render() {
    return (
      <div>
        <div>
          <form>
            <label htmlFor="username">
              用户：<input type="text" id='username' name="username"  value={ this.state.username }  onChange={ e => this.handleChange(e)}/>
            </label>
          </form>
        </div>

        <div>
          <form>
            <label htmlFor="password">
              密码：<input type="text"  id='password'   name="password"  value={ this.state.password }  onChange={ e => this.handleChange(e)}/>
            </label>
          </form>
        </div>

        <div>
          <form>
            <label htmlFor="age">
              {/*受控组件*/}
              年龄：<input type="text" id='age' name="age" value={ this.state.age }   onChange={ e => this.handleChange(e)}/>
            </label>
          </form>
        </div>
        <input type="submit" value="提交"  onClick={ e => this.handleSubmit(e) }/>
      </div>
    );
  }

  handleSubmit(e) {
    e.preventDefault();
    const { username, password, age } = this.state
    console.log(username, password, age)
  }

  handleChange(e) {
    this.setState({
      //计算属性名称
      [e.target.name]: e.target.value
    })
  }
}


export default App;

 四 非受控组件

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-18 00:40:12
 * @LastEditTime: 2022-10-18 00:57:39
 */
import React, { PureComponent, createRef } from 'react';

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      username: ''
    }

    this.usernameRef = createRef()
  }
  render() {
    return (
      <div>
        <form onSubmit={e=> this.handleSubmit(e)}>
          <label htmlFor="username">
            {/*受控组件*/}
            用户：<input type="text" id='username' ref={this.usernameRef}/>
          </label>
          <input type="submit" value="提交" />
        </form>
      </div>
    );
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log(this.usernameRef.current.value)
  }

  handleChange(e) {
    console.log(e.target.value)
    this.setState({
      username: e.target.value
    })
  }
}

export default App;