@ material-ui / core에서이 TextField가있는 Formik 양식이 있습니다.
<TextField
autoFocus
fullWidth
name='name'
label='Name'
variant="outlined"
onChange={handleChange("name")}
helperText={errors.name ? errors.name : "What's your name?"
error={errors.name}
touched={touched.name}
value={values.name}
/>
이것은 initialValues빈 user개체 로 설정된 상태에서 양식이 처음으로로드 될 때 잘 작동 합니다. 이름 입력에 초점이 맞춰집니다.
그러나 기존 사용자 개체를 사용하여 양식을로드 할 때 (편집 작업 중) 모든 필드를 올바르게로드하지만 더 이상 포커스가 없습니다.
이 양식은 상태 비 저장 기능 구성 요소 내부에 props.user있으며 부모 구성 요소에서 가져옵니다.
이 경우 초점을 맞추는 방법에 대한 아이디어가 있습니까? 초점을 맞추기 위해 연결할 수있는 장소가 있습니까?
####### 편집 1 #######
나는 사용을 시도 useEffect했지만 입력 필드가 실제로 값으로 업데이트되기 전에 해고됩니다 ...
useEffect(() =>
{
debugger;
textInput.focus(); // at this point the input field hasn't gotten the value yet.
})
내 생각 ref에는 부모 구성 요소 내부 를 유지해야한다는 것입니다 ...
얼마 동안 디버깅 후 작동했습니다 ...
소품이 후크로 변경 될 때 Run 부작용 에서 가져온 코드 스 니펫을 사용 debugger하고 input요소 를 확인할 수 있는 명령문을 추가했습니다 .
let input = null
useEffect(() =>
{
console.log('rendered!')
if (input)
{
debugger;
input.focus()
}
}, [props.user])
props.user인수로 전달 된 점에 유의하십시오 . 이것은 props.user변경 될 때마다 useEffect후크가 실행 됨을 의미합니다 .
설정 ref시 <TextField>:
ref={(i) => { input = i }}
React JS 포커스를 다룰 때 여러 곳에서 볼 수 있듯이 Material-UI에서 TextField의 <div>부모 요소 에 집중하려고했습니다 . 실제 입력은 이것 안에 <div>있습니다.
따라서 설정할 올바른 소품 TextField은 inputRef다음과 같습니다.
inputRef={(i) => { input = i }}
이 관련 답변 은 나를 올바른 방향으로 이끌었습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다