제어 및 비 - 제어 어셈블리 구성 요소

1. 제어 구성 요소

데이터 입력 소자의 유일한 소스는 기능을 변경하여 데이터를 갱신하는 방법 setState를 호출 상태로 형성함으로써 반응한다.

초기 값은 this.state의 초기 값입니다.

TYPE = "문자 / 숫자 / 다른 입력 형식"요소, 속성 값, 표시 제어 데이터 1 입력; 값 e.target.value;

2. 데이터 요소는 값에 의해 제어되지만, 그 값은 배열을 전달하는 복수 설정할 수 있으며 값 e.target.value 단계;

3. 텍스트 영역 표시 소자 및 제어 데이터 속성 값, 값 e.target.value;

4. 선택 속성 및 디스플레이 제어 데이터에 의해 = "체크 박스"또는 "무선"; 값 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 
    ? (유형)를 송출 = 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 </ 옵션> 
        </ 선택> 
      </ FORM>       ) 
  } 
}

2. 비 제어 구성 요소

코드 제어 값 만 동작 값을 통하여 사용자의 행동을 할 수 없다. 프로세스 데이터 DOM 노드.

입력 다른 타입의 값이 사용되지 않고, 비 - 제어 요소; 1. 타입 = "파일"입력 요소는 비 - 제어 요소이고;

2. 유형 = "파일"또한, 여러 속성을 통과 여러 파일을 전송할 수 있습니다;

3. 어셈블리 REF 속성을 사용하여, 값은 DOM 노드를 획득;

4. 입력 [텍스트] / 선택 / 텍스트 영역을 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) 
  } 
  렌더링 () { 
    반환 (
       <form onSubmit = { 이 .handleSubmit}> 
        < 입력 
          유형 = "텍스트"
           // DEFAULTVALUE初值 
          DEFAULTVALUE = "输入" 
          REF = { 이 .inputRef}
         /> 
        < 입력 
          타입 = "체크 박스"
           // defaultChecked初值
          defaultChecked 
          REF = { 이 .checkRef}
         /> 
        < 입력 
          타입 = "파일" 
          REF = { 이 .fileRef}
         /> 
        < 선택 
          DEFAULTVALUE = "C" // 初值 
          REF = { 이 .selectRef}
         > 
          <옵션 값 = " 는 ">은 </ 옵션> 
          <옵션 값 ="B "> B </ 옵션> 
          <옵션 값 ="C "> C </ 옵션> 
          <옵션 값 ="D "> D </ 옵션>
        <선택 /> 
        <input 타입 = / '제출'> 
      </ FORM>       )

  } 
}