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

1.制御コンポーネント

状態によりデータ入力要素の唯一の供給源として反応機能を変更することにより、データを更新するSETSTATEメソッド呼び出しを形成します。

彼らの初期値はthis.stateの初期値です。

タイプ=「テキスト/番号/他の入力フォーマット」要素、値属性、表示制御データの1入力、値e.target.value。

2.データ要素も値によって制御され、その値は、配列を渡す、複数設定することができ、値e.target.value。

3. TEXTAREA表示素子と制御データ属性値、値e.target.value。

4. =「チェックボックス」または「ラジオ」、checked属性によって、表示制御データ、値がe.target.checked。

onChangeイベントハンドラ属性とSETSTATEスルー5は、フォームの値を更新します。

6一緒に、組み合わせハンドラでは、属性名は、コンポーネントの遭遇に追加された場合、制御コンポーネントの複数;

7.値の値がチェック又は非制御コンポーネントに対応する、未定義またはNULLである場合。

   あなたはハンドラを使用しない場合はそれ以外の場合は、値を変更することはできません。

クラスInputFormでははReact.Component {延び
  コンストラクタ（小道具）{ 
    スーパー（小道具）。
    この .state = { 
      textValue： '初期' 、
      ：チェック偽、
      無線連絡：偽、
      areaValue： '' 、
      selectValue： '' 
    } 
  } 
  handleChangeInput =（E）=> { // 处理函数 
    CONST目標= e.target。
    const型 = target.type。
    CONST checkedTypes = [ 'ラジオ'、 'チェックボックス' ]。
    //【「ラジオ」は、「チェックボックス」 ] 値e.target.valueの一種である
    // 値の他のタイプのe.target.valueある 
    ？（タイプ）LET = checkedTypes.includes値target.checked：Target.Value。
    console.log（値）; 
    CONST名 = target.name;
     この.setState（{ 
      [名前]：値
    }）
  } 
  レンダリング（）{ 
    リターン（
       <FORM> 
        { / * 制御コンポーネントのすべてと、name属性が設けられていますどのコンポーネントを区別する* / }
         < INPUTの
          名前 =「textValue」
          タイプ =「テキスト」 
           // 値が使用値を 
          値= {この.state.textValue} 
          のonChange = { この.handleChangeInput} 
         /> 
        < 入力
          名 = "がチェック" 
          タイプ = "チェックボックスが"
           // 使用传チェック值 
          {=チェックこれは.state.checked} 
          のonChange = { この.handleChangeInput}
         / > 
        < 入力
          名 = "無線連絡" 
          タイプが "ラジオ" =
           //は使用值传チェック 
          {=チェック本 .state.radioed}
          のonChange = {この.handleChangeInput}
         />   
        < テキストエリア
          名 = "areaValue"
           // 使用値传值 
          値= { この.state.areaValue} 
          のonChange = { この.handleChangeInput}
         />   
        < 選択
          名 = "selectValue"
           // 使用値传值 
          値= { この.state.selectValue} 
          のonChange = { この.handleChangeInput}
         >  
          <オプション値= ""> A </オプション>
          <オプション値= "B"> B </オプション> 
          <オプション値= "C"> C </オプション> 
          <オプション値= "D"> D </オプション> 
        </選択> 
      </フォーム>       ）
  } 
}

2.非制御コンポーネント

コードは、演算値を介して、ユーザの挙動制御値とすることができません。プロセスデータへのDOMノード。

入力の他のタイプの値が使用されていない、非制御成分; 1タイプ=「ファイル「の入力要素は、非制御の成分です。

2.タイプ=「ファイル」はまた、複数のファイルを転送し、複数の属性を渡すことができます。

3.アセンブリref属性を使用して、値がDOMノードを取得しました。

4.入力[テキスト] /選択/ TEXTAREAを、DefaultValueプロパティは、最初のレンダリングに初期値を与えています。

    defaultCheckedプロパティを初期化することができるが、入力[チェックボックス] [ラジオ]。

クラスInputFormでははReact.Component {延び
  コンストラクタ（小道具）{ 
    スーパー（小道具）。
    この .inputRef = React.createRef（）。
    この .fileRef = React.createRef（）。
    この .selectRef = React.createRef（）。
    この .checkRef = React.createRef（）。
  } 
  handleSubmit =（E）=> { 
    e.preventDefault（）。// 阻止表单默认提交 
    のconst inputValueで= この.inputRef.current.value。
    constのselectValue = この.selectRef.current.value。
    constのファイル = この.fileRef.current.files [0]。// 单个文件 
    のconst checkValue = この.checkRef.current.checked。
    console.log（inputValueで、ファイル、selectValue、checkValue）
  } 
  （）{レンダリング
    リターン（
       <形式をonSubmit = { この .handleSubmit}> 
        < 入力
          タイプ = "テキスト"
           // はdefaultValue初值 
          はdefaultValue = "输入" 
          REF = { この.inputRef}
         /> 
        < 入力
          タイプ = "チェックボックス"
           // defaultChecked初值
          defaultChecked 
          REF = { この.checkRef}
         /> 
        < 入力
          タイプ = "ファイル" 
          REF = { この.fileRef}
         /> 
        < 選択
          はdefaultValue = "C" // 初值 
          REF = { この.selectRef}
         > 
          <オプション値=」 "> A </オプション> 
          <オプション値=" B "> B </オプション> 
          <オプション値=" C "> C </オプション> 
          <オプション値=" D "> D </オプション>
        <選択/>     ） 
        <入力タイプを= '提出' />
      </フォーム>   
  } 
}