제어 및 비 - 제어 어셈블리 컴포넌트 반응

제어 구성 요소는 : 상태를 갱신하여 데이터를 변경

수입 '반응'로부터 반작용 

클래스하여 ToDoList가 React.Component {연장 
    상태 = { 
        taskA : ' , 
        taskB : ' , 
        리스트 [] 
    } 

    렌더링 () { 
      반환 (
           <> 
             <div> 
                taskA
                 <input 타입 = '문자' 이름 = "taskA '값 = { 이 .state.taskA의 onChange = {} 이 .handleChange} /> <버튼의 onclick = {} this.handleAdd NAME ="taskA'>添加</ 버튼> 
            </ div> 
            
            <div> 
               taskB
                <input 타입 = '문자'= 'taskB'값 =을 {이름 이.state.taskB의 onChange = {} 이 .handleChange} /> <버튼의 onclick = {} this.handleAdd NAME = "taskB '>添加</ 버튼> 
            <div> 
            <UL> 이 .state.map ((항목, 인덱스 ) => 
   　　　　    <LI 키 = {항목 + 인덱스}> {아이템} <버튼의 onclick = {() => 이 .handleDelete (색인)}> X </ 버튼> </ 리> 
　　　　　  ) </ UL>     
          </>       ) 
    } 
    handleChange = (E) => {
         이 .setState ({ 
            [e.target.name] e.target.value 
        }) 
    } 
    handleAdd = (E) =>{ 
        를 입력하자 =을
                
            


e.tatget.name 
        작업하자 = 이 .STATE [유형]
         경우 (유형 === 'taskA' ) { 
            작업 = `taskA : $ {작업}` 
        } 다른  경우 (유형 === 'taskB' ) { 
            작업 = taskB '$ {}`일 
        } 
        본 .setState ({ 
           목록 : ... 이 .state.list 태스크] 
           [형태] ' 
       }) 
    } 

    handleDelete = (인덱스) => { 
        CONST 목록 = ... 이 .state.list] 
        list.splice을 (인덱스, 1 )
         이 .setState ({ 
            목록 
        }) 
    } 
} 
수출 기본 하여 ToDoList

비 제어 구성 요소 : 심판 DOM에서 수집 된 데이터를 사용하여, 필요가 DOM을 운영하는

1 임포트에서 '반응'반작용
 2  
3 개  UnControl가 React.Component 확장 클래스 {
 4    태스크 = React.createRef ()
 5    주 = {
 6      에서 []
 7    }
 8    렌더링 () {
 9       창 (
 10           <>
 11              <div>
 12                 <입력 REF = { 이 .task} />
 13                 // <입력 REF = {DOM => {this.task = DOM}} /> 
14                 <버튼의 onclick = { 이 .handleAdd}>添加<버튼>
 15              < / DIV>
16              <UL>
 17                  이 .state.list.map ((항목, 인덱스) => 
 18                     <LI 키 = {+ 인덱스 항목}> {아이템} </ 리>
 19                  )
 20              </ UL>
 21           </>
 22       )
 23    }
 24    handleAdd = (E) => {
 25       이 .setState ({
 26         목록 : ... 이 .state.list, e.target.current.value]
 27         // 목록 : ...이. state.list, e.target.value] 
28       })
 (29)    }
 (30)  
(31)  } 
 (32) 
33 수출 기본 UnControl