React.js의 텍스트 입력에서 변경/초점 아웃 이벤트를 올바르게 포착하는 방법

React.js의 텍스트 입력에서 변경/초점 아웃 이벤트를 올바르게 포착하는 방법

텍스트 입력에 대한 변경 이벤트를 처리하려는 폼이 있지만 키 다운에 대한 React onChange 트리거링(입력 필드가 포커스를 벗어날 때 변경 이벤트를 트리거하는 네이티브 JS와 반대)이 있습니다.

원하는 것을 할 수 있는 리액트 방법이 있나요?

입력의 포커스가 흐트러질 때만 유효성을 트리거하려면 Blur에서 사용할 수 있습니다.

React는 onFocusIn 및 onFocusOut 대신 onFocus 및 onBlur를 사용합니다.모든 React 이벤트는 버블로 정규화되므로 react에서 onFocusIn 및 onFocusOut은 필요하지 않거나 지원되지 않습니다.2개

JavaScript = > 대응

onfocusout = > onBlur

onfocusin = > onFocus

늦었지만, 포커스 및 포커스 아웃 이벤트의 브라우저 레벨의 실장이나 onFocus 와 onBlur 의 합성 반응에는 몇 가지 차이가 있습니다.focus와 focusout은 실제로 버블이 되고 onFocus와 onBlur dont는 버블이 됩니다.즉, 현재 반응의 포커스인과 포커스아웃에 대해 정확히 동일한 구현이 없습니다.어쨌든 대부분의 케이스는 onFocus와 onBlur에서 다루어집니다.

조심하셔야 할 것 같아요onBlur에는 IE11(또는 이에 준하는 IE의 relatedTarget(또는 이에 준하는 것) 사용방법)의 몇 가지 경고가 있습니다.

단, 사용할 수 있는 방법은 없습니다.onFocusOut내가 아는 한 반응해봐자세한 내용은 github https://github.com/facebook/react/issues/6410에서 문제를 참조하십시오.(이 업데이트에 대해서는, 이하를 참조해 주세요).

갱신:

React 17 현재 이벤트가 업데이트되었습니다. onFocus/onBlur에 대한 포커스인/포커스아웃 사용은 PR을 참조하십시오.단, 브레이크 변경 리스트의 페이지에는 다음과 같은 내용이 기재되어 있습니다.

React 17은 onFocus 이벤트를 위해 후드 아래에서 포커스에서 포커스로 전환했지만, 이것이 거품이 튀는 동작에는 영향을 주지 않습니다.React에서는 onFocus 이벤트가 항상 버블되어 있으며 일반적으로 react 17에서는 onFocus 이벤트가 더 유용한 기본값이기 때문에 계속 버블됩니다.다른 특정 사용 사례에 대해 추가할 수 있는 다양한 검사에 대해서는 이 샌드박스를 참조하십시오.

내 경우엔 새로운 값 쓰기를 마치면 입력이 제출되기를 원했기 때문에onBlur는 '아예'를 했다.fetch 삭제:

<Form.Control
    placeholder={i.stock}
    type="text"
    id={"inputID"}
    onBlur={
        (event) => {
            if (confirm("Do you want to update stock of " + i.label + " to " + event.target.value) == true) {
                fetch(REACT_APP_REST + "/product/" + i._id, {
                    method: 'PATCH',
                    headers: {
                        'Accept': 'application/json, text/plain, */*',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ stock: event.target.value })
                }).then(res => res.json())
                    .then(res => {
                        toast("the stock of" + i.label + "has been updated");
                        getData();
                        console.log(res)
                    });
            } else {
                alert("You canceled!")
            }
        }
    }
></Form.Control>

리액트에서 이 이벤트를 시도하면 효과가 있었습니다.on Mouse Leave().onBlur() 및 onFocusOut이 작동하지 않는 경우 사용합니다.

언급URL : https://stackoverflow.com/questions/37609049/how-to-correctly-catch-change-focusout-event-on-text-input-in-react-js