历目
历目

【REACT-受控组件和非受控组件】

REACT-受控组件和非受控组件

  • 概述
  • 受控组件
  • 非受控组件
  • 受控组件应用ToDoList

概述

React中的组件根据是否受React控制可分为受控的和非受控的。
React 中的受控组件和非受控组件都是针对于表单数据而言的。React 推荐使用受控组件来处理表单数据。

受控组件

在一个受控组件中，表单数据是由 React 组件来管理的。

import React, { Component} from 'react'
import ReactDOM from "react-dom";
export default class App extends Component {
  state = {
    value:'初始值'
  }
  render() {
    return (
      <div>
        <input type="text" value={this.state.value} onChange={(evt)=>{
          this.setState({value:evt.target.value})
        }}/>
        <button onClick={()=>{
          console.log(this.state.value)
        }}>登录</button>
        <button onClick={()=>{
          this.setState({value:""})
        }}>重置</button>
        
        <Child value={this.state.value}></Child>
      </div>
    )
  }
}

class Child extends Component {
  render() {
    return (
      <div>
        {this.props.value}
      </div>
    )
  }
}

ReactDOM.render(
  // 
    <App />
  // 
  ,document.getElementById('root'))

非受控组件

在非受控组件中，表单数据交由 DOM 节点处理，可以使用 ref 来从 DOM 中获取表单数据

import React, { Component} from 'react'
import ReactDOM from "react-dom";
export default class App extends Component {
  myref = createRef(); 
  // state = {
  //   value:'初始值'
  // }
  render() {
    return (
      <div>
        {/*  想React 能赋予组件一个初始值，但是不去控制后续的更新 可以指定defaultValue*/}
        {/*  同样，  和  支持 defaultChecked ，