反応制御および非制御組立部品

制御コンポーネント：ステータスを更新することで、データを変更するには

インポートは、 '反応'からリアクト

クラスtodolistの延びReact.Component { 
    状態 = { 
        ：taskA '' 、
        taskB： '' 、
        リスト：[] 
    } 

    レンダリング（）{ 
      リターン（
           <> 
             の<div> 
                taskA
                 <INPUT TYPE = 'テキスト' NAME = 'taskA'値= { この .state.taskA}のonChange = { この .handleChange} /> <ボタンのonClick = {this.handleAdd} NAME = 'taskA'>添加</ボタン> 
            </ div> 
            
            <div> 
               taskB
               の<input type = 'text'の{= = 'taskB'値に名前を付け、この.state.taskB}のonChange = { この .handleChange} /> <ボタンのonClick = {this.handleAdd} NAME = 'taskB'>添加</ボタン> 
            の<div> 
            <UL> この .state.map（（項目、インデックス）=> 
   　　　　    <LIキー= {アイテム+指数}> {アイテム} <ボタンのonClick = {（）=> この .handleDelete（インデックス）}> X </ボタン> </ LI> 
　　　　　  ） </ 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の

非制御コンポーネントは：ref 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キー= {アイテム+指数}> {アイテム} </ 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