제어 및 제어되지 않은 양식

제어 및 제어되지 않은 양식 입력 React.js

안녕하세요 이 문서에서는 양식을 관리할 수 있는 제어 및 제어되지 않은 입력에 대해 알아봅니다.
이 정보는 최상의 옵션을 선택하는 데 도움이 됩니다.

제어되지 않는 입력 핸들러:

제어되지 않은 구성 요소는 정보가 제어되지 않은 방식으로 취해질 것임을 나타냅니다.
핸들러는 정보를 포착하기 위해 조치를 취하면 정보를 가져옵니다(이벤트).

import React, { useState } from 'react';

function App() {

  const [search, setSearch] = useState('')

  const submit = (e) => {
    e.preventDefault();
    setSearch(e.target.search.value);
  }

  console.log(search);

  return (<>

    <form onSubmit={submit}>

      <input
        type='text'
        name='search'
        autoComplete='off ' ></input>
      <button> submit </button>
    </form>
  </>
  );

}
------------------- Example 2 -------------------

import React, { useState } from 'react';

function App() {

  const [search, setSearch] = useState('')

  const submitTwo = (e) => {
    e.preventDefault();
    setSearch(e.target.value);
  }

  console.log(search);

  return (<>
    <form>

      <input 
        type='text'  
        name='search' 
        autoComplete=' off ' 
        onChange={submitTwo} ></input>
      <button> submit </button>

    </form>
  </>

  );
}

export default App;

입력이 통제되지 않은 것을 볼 수 있듯이 버튼을 클릭한 순간 정보를 포착합니다. 입력 과정 전이나 도중에 포착되지 않았습니다.
'n'번 클릭할 수 있으며 이는 정보를 얻을 수 있지만 동적이거나 반응적이지 않음을 의미합니다.

친절한 알림은 onClick 이벤트와 onSubmit에 주의를 기울입니다.

왜 통제가 안되는거야?? 그것은 우리가 핸들러를 제출하고 호출하면 정보가 포착된다는 것을 의미합니다. 덜 동적이며 입력하는 동안 삭제할 수 없으며 입력 필드의 모든 정보를 삭제해야 하지만 이 제어되지 않은 상태에서는 가능하지만 우리가 그것을 요청할 때 그것은 잘못되었거나 나쁜 것이 아니라 단지 통제되지 않은 것입니다. 그것은 잘못되었거나 나쁜 것을 의미하지 않습니다. 그것은 통제되지 않고 자체 이점이 있습니다.

제어 입력 처리기:

제어된 형식 핸들 입력은 데이터가 채워진 이후 각 데이터 조각을 가져올 수 있는 핸들 방식을 의미합니다. 형식 데이터 기능과 함께 정보가 입력에 추가되는 동안 형식을 지정할 수 있는 매우 유용한 원인이며 적용할 수도 있습니다. 원하는 기능 상상은 한계

import React, { useState } from 'react';

function App() {
  const [search, setSearch] = useState('')

  const submitOne = (e) => {
    e.preventDefault()
    setSearch(e.target.value)
    console.log(search)
  }

  const sentInfo = (e) => {
    e.preventDefault()
    console.log(search)

  }

  return (<>

    <form onSubmit={(e) => sentInfo(e)} >

      <input
        type='text'
        name='search'
        autoComplete='off'
        value={search}
        onChange={submitOne}
      ></input>
      <button> submit </button>
    </form>

    <p>{search}</p>
  </>

  );
}

export default App;

이 제어된 입력 형식을 완성하기 위해 중요한 값을 친절하게 상기시켜줍니다.

입력의 이 값은 입력된 각 정보를 가져오고 외부 일치 기능과 함께 필요한 한 번만 얻기 위해 각 문자를 확인하는 데 도움이 됩니다.

또한 이 문서는 각각이 정확하고 유용하다는 것을 보여줍니다. 작업 중인 프로젝트와 관련하여 최선의 옵션을 선택하고 미소를 지으며 코딩을 계속하십시오.