React: 제어 된 입력의 경우 null 또는 ""로 초기화하지 않으면 단계가 예상대로 작동하지 않습니다.

Windows 10의 Chrome 64와 Debian의 Firefox 52 모두에서이 바이올린으로 매우 특별한 동작을보고 있습니다. 입력에 50000을 입력하고 즉시 위쪽 화살표를 클릭하면 50100이됩니다. 입력에 50000을 입력하고 문서의 다른 곳을 클릭 한 다음 위쪽 화살표를 클릭하면 55000이됩니다.

값을 변경할 필요가 없습니다. 위쪽 화살표를 여러 번 클릭하면 의미가없는 숫자로 변경되기 시작합니다.

@andyboyne 보고서에 감사드립니다. 문제는 필드가 흐려질 때까지 숫자 입력에 대한 value 속성을 업데이트하지 않기 때문에 발생합니다. 이는 브라우저 유효성 검사와 관련된 원치 않는 동작을 피하기 위해 수행합니다. cc @nhunzaker.

제어 된 입력 https://github.com/facebook/react/issues/11896에 대한 value 속성 동기화를 마침내 중지하면이 문제를 해결해야합니다 .

예. 사실 우리가 이것에 대한 타임 라인을 모아야할지 궁금합니다.

지쳐서 언급했듯이 동기화 문제이며 필드가 흐려지면 필드가 동기화됩니다.
그래서 나는 console.log를 추가했고 e.target.value와 e.target.getAttribute ( "value")는 필드가 흐려지지 않는 동안 동기화되지 않는다는 것을 알아 냈습니다.
따라서 해결 방법은 e.target.setAttribute ( "value", e.target.value);를 추가하는 것입니다. 이 값을 강제로 업데이트하면 예상대로 작동합니다.

       onChange={e => {
        console.log("target" , e.target.value);
        console.log("getAttribute value",  e.target.getAttribute("value"));
        e.target.setAttribute("value",e.target.value); 
        this.setState({value: e.target.value, step: e.target.value / 10});
      }}

아니요, 이것은 여전히 ​​문제입니다. 그것은 저를 미치게합니다. 우리는 여전히 v16으로 제어 된 입력을 단순화하지 않았습니다!