React高级特性之受控和非受控组件

一、受控组件

受控组件：input框自己的状态被React组件状态控制

// 类组件引入React
import React from 'react'

class InputComponent extends React.Component{
  state = {
    message: 'zm66666'
  }
  changeHandler = (e) => {
    this.setState({
      message: e.target.value
    })
  }
  render () {
    // 使用状态
    return (
      <div>
        {/* 绑定value 绑定事件 */}
        <input type='text' value={this.state.message} onChange={this.changeHandler} />
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent/>
    </div>
  )
}

export default App


// 受控组件：input框自己的状态被React组件状态控制

// 1. 在组件的state中声明一个组件的状态数据
// 2. 将状态数据设置为input标签元素的value属性的值
// 3. 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值（即用户当前输入的值）
// 4. 调用setState方法，将文本框的值作为state状态的最新值

// 受控组件

import React, { FC, useState, ChangeEvent } from 'react'
// import type { ChangeEvent } from 'react'

const FormDemo: FC = () => {

  // input
  const [text, setText] = useState<string>('input')
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value)
  }

  // textarea
  const [text2, setText2] = useState<string>('textarea')
  const handleChange2 = (event: ChangeEvent<HTMLTextAreaElement>) => {
    setText2(event.target.value)
  }
  const getHtml = () => {
    return { __html: text2.replaceAll('\n', '<br>') }
  }

  // radio
  const [gender, setGender] = useState<string>('male')
  const handleChange3 = (event: ChangeEvent<HTMLInputElement>) => {
    setGender(event.target.value)
  }

  // checkbox
  // const [checked, setChecked] = useState(false)
  // const handleChange4 = (event: ChangeEvent<HTMLInputElement>) => {
  //   setChecked(!checked)
  // }

  // checkbox组
  const [selectedFruitList, setselectedFruitList] = useState<string[]>([])
  const handleChange5 = (event: ChangeEvent<HTMLInputElement>) => {
    const fruit = event.target.value
    if (selectedFruitList.includes(fruit)) {
      setselectedFruitList(selectedFruitList.filter(f => {
        if (f === fruit) return false
        return true
      }))
    } else {
      setselectedFruitList(selectedFruitList.concat(fruit))
    }
  }

  // select
  const [lang, setLang] = useState<string>('js')
  const handleChange6 = (event: ChangeEvent<HTMLSelectElement>) => {
    setLang(event.target.value)
  }


  return (
    <>
      <div>
        FormDemo:
        <div>
          <span>input：</span>
          <input type="text" value={text} onChange={handleChange}/>
          <button onClick={() => console.log(text)}>打印</button>
          <button onClick={() => setText('66666666')}>set</button>
        </div>
        <div>
          <span>textarea：</span>
          <textarea value={text2} onChange={handleChange2}/>
          <p dangerouslySetInnerHTML={getHtml()}></p>
        </div>
        <div>
          <span>radio：</span>
          <label htmlFor="radio1">男</label>
          <input type="radio" value='male' name='gender' id='radio1' onChange={handleChange3} checked={gender === 'male'}/>
          <label htmlFor="radio2">女</label>
          <input type="radio" value='female' name='gender' id='radio2' onChange={handleChange3} checked={gender === 'female'}/>
          <button onClick={() => console.log(gender)}>打印{gender}</button>
        </div>
        {/* <div>
          <span>checkbox：</span> 
          <label htmlFor="checkbox1">选中</label>
          <input type="checkbox" id='checkbox' checked={checked} onChange={handleChange4}/>{checked.toString()}
        </div> */}
        <div>
          <span>checkbox组：</span> 
          <label htmlFor="checkbox1">苹果</label>
          <input type="checkbox" id='checkbox1' value='apple' checked={selectedFruitList.includes('apple')} onChange={handleChange5}/>
          <label htmlFor="checkbox2">橙子</label>
          <input type="checkbox" id='checkbox2' value='orange' checked={selectedFruitList.includes('orange')} onChange={handleChange5}/>
          <label htmlFor="checkbox3">香蕉</label>
          <input type="checkbox" id='checkbox3' value='banana' checked={selectedFruitList.includes('banana')} onChange={handleChange5}/>
          {JSON.stringify(selectedFruitList)}
        </div>
        <div>
          <span>select：</span>
          <select value={lang} onChange={handleChange6}>
            <option value='java'>java</option>
            <option value='js'>js</option>
            <option value='php'>php</option>
          </select>
        </div>
      </div>
    </>
  )
}


export default FormDemo

// 受控组件 vs 非受控组件
// 受控组件: 值同步到state, 使用value属性
// 非受控组件: 值不同步state, 使用defaultValue属性
// react推荐使用受控组件， 看似麻烦，但是 更加可控

二、非受控组件

// 类组件引入React createRef
import React, { createRef } from 'react'

class InputComponent extends React.Component{
  // 使用createRef产生一个存放dom的对象容器
  msgRef = createRef()

  changeHandler = () => {
    console.log(this.msgRef.current)
    console.log(this.msgRef.current.value)
  }

  render () {
    // 使用状态
    return (
      <div>
        {/* ref绑定 获取真实dom */}
        <input ref={this.msgRef} />
        <button onClick={this.changeHandler}>click</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent/>
    </div>
  )
}

export default App


// 非受控组件： 
// 通过手动操作dom的方式获取文本框的值
// 文本框的状态不受react组件的state中的状态控制
// 直接通过原生dom获取输入框的值

// 1.导入createRef 函数
// 2.调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中
// 3.为input添加ref属性，值为msgRef
// 4.在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，
// 而其中msgRef.current.value拿到的就是文本框的值

import React from 'react'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '双越',
            flag: true,
        }
        this.nameInputRef = React.createRef() // 创建 ref
        this.fileInputRef = React.createRef()
    }
    render() {
        // // input defaultValue
        // return <div>
        //     {/* 使用 defaultValue 而不是 value ，使用 ref */}
        //     <input defaultValue={this.state.name} ref={this.nameInputRef}/>
        //     {/* state 并不会随着改变 */}
        //     <span>state.name: {this.state.name}</span>
        //     <br/>
        //     <button onClick={this.alertName}>alert name</button>
        // </div>

        // // checkbox defaultChecked
        // return <div>
        //     <input
        //         type="checkbox"
        //         defaultChecked={this.state.flag}
        //     />
        // </div>

        // file
        return <div>
            <input type="file" ref={this.fileInputRef}/> // 获取上传问卷 要使用非受控组件！！！！！！！！
            <button onClick={this.alertFile}>alert file</button>
        </div>

    }
    alertName = () => {
        const elem = this.nameInputRef.current // 通过 ref 获取 DOM 节点
        alert(elem.value) // 不是 this.state.name
    }
    alertFile = () => {
        const elem = this.fileInputRef.current // 通过 ref 获取 DOM 节点
        alert(elem.files[0].name)
    }
}

export default App

三、总结