当前位置：首页 > news >正文

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

news 2025/6/25 10:55:47

一、受控组件

受控组件：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 = () => {// inputconst [text, setText] = useState<string>('input')const handleChange = (event: ChangeEvent<HTMLInputElement>) => {setText(event.target.value)}// textareaconst [text2, setText2] = useState<string>('textarea')const handleChange2 = (event: ChangeEvent<HTMLTextAreaElement>) => {setText2(event.target.value)}const getHtml = () => {return { __html: text2.replaceAll('\n', '<br>') }}// radioconst [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.valueif (selectedFruitList.includes(fruit)) {setselectedFruitList(selectedFruitList.filter(f => {if (f === fruit) return falsereturn true}))} else {setselectedFruitList(selectedFruitList.concat(fruit))}}// selectconst [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() // 创建 refthis.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>// filereturn <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