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(// <React.StrictMode><App />// </React.StrictMode>,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*/}{/* 同樣， <input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked ， <select>和 <textarea> 支持 defaultValue 。*/}<input type="text" ref={this.myref} defaultValue="初始值" onChange={(evt)=>{this.setState({value:evt.target.value})}}/><button onClick={()=>{console.log(this.myref.current.value)}}>登錄</button><button onClick={()=>{this.myref.current.value = "";}}>重置</button>{/* 非受控組件中，dom元素數據(this.myref.current.value)不能進行外部的分享，可以使用狀態中的數據進行傳遞 */}{/* <Child value={this.myref.current.value}></Child> */}{/* <Child value={this.state.value}></Child> */}</div>)} }class Child extends Component {render() {return (<div>{this.props.value}</div>)} }ReactDOM.render(// <React.StrictMode><App />// </React.StrictMode>,document.getElementById('root'))

受控組件應用ToDoList

import React, { Component} from 'react' import ReactDOM from "react-dom"; export default class ToDoList extends Component {constructor(){//構造器//子類必須調用super()super();//super 調用了父類（Component）的構造函數來去實例化子類本身,可以向父級傳參//必須加thisthis.state = {todoList:[{id:1,text:'eat',isChecked:false},{id:2,text:'sleep',isChecked:true},{id:3,text:'run',isChecked:true},],value:'',}}//外部變量可以直接寫// state = {// todoList:[11,22,33]// }render() {return (<div><input value={this.state.value} onChange={(evt)=>{this.setState({value:evt.target.value})}}></input><button onClick={()=> this.add()}>添加</button><ul>{this.state.todoList.map((item,index) => {return (<li key={item.id} >{/*數據需要進行刪除和添加的話，key最好是使用唯一辨識值id*/ }{/*dangerouslySetInnerHTML的作用相當于VUE中的v-html*/}<input type="checkbox" checked={item.isChecked} onChange={()=>this.handleChecked(index)}/><span dangerouslySetInnerHTML={{__html:item.text}} style={{textDecoration:item.isChecked?'line-through':''}}></span><button onClick={()=>this.del(index)}>del</button></li>)})}</ul>{this.state.todoList.length === 0 && <div>暫無待辦事項2</div>}{/*第一個條件為真才會執行后面的條件，否則不執行 */}{/* {this.state.todoList.length === 0?<div>暫無待辦事項1</div>:null}<div>{this.state.todoList.length === 0 && '暫無待辦事項3'}</div> */}</div>)}add(){let newList = [...this.state.todoList];//盡量不要直接更改原對象newList.push({id:this.state.todoList.length+1,text:this.state.value,isChecked:false});this.setState({todoList:newList,value:''});}del(index){//淺克隆// let newList = this.state.todoList.concat();let newList = this.state.todoList.slice();newList.splice(index,1);this.setState({todoList:newList});}handleChecked(index){let newList = this.state.todoList.slice();newList[index].isChecked = !newList[index].isChecked;this.setState({todoList:newList});} }ReactDOM.render(// <React.StrictMode><ToDoList />// </React.StrictMode>,document.getElementById('root'))

總結

以上是生活随笔為你收集整理的【REACT-受控组件和非受控组件】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。