React: 클릭 핸들러의 event.preventDefault는 onChange가 호출되는 것을 막지 않습니다.

change 이벤트에 의해 생성되는 ChangeEventPlugin 에 대한 응답으로 topChange , 당신의 앞에 onClick 핸들러도 (라고 그래서 전에 preventDefault call), 여기 : https://github.com/facebook/react/blob/master/src/renderers/dom/shared/eventPlugins/ChangeEventPlugin.js#L338

이 플러그인은 체크 박스의 값이 변경되는지 확인하려고 시도하며, 그렇다면 change 이벤트를 큐에 넣습니다. inputValueTracking 기능을 사용하여 이전 값과 다음 값을 비교하여이 결정을 내립니다. 여기에서 https://github.com/facebook/react/blob/master/src/renderers/dom/shared/ inputValueTracking.js # L154

nextValue 는 다음과 같이 DOM에서 직접 가져옵니다. value = isCheckable(node) ? '' + node.checked : node.value; https://github.com/facebook/react/blob/master/src/renderers/dom/shared/inputValueTracking.js# L56

문제는 node.checked 값이이 시점에서 일시적으로 true이므로 첫 번째 클릭 후 다음과 같습니다.

lastValue == false (정확함)
nextValue == true (잘못됨)

다음 확인란을 클릭하면 값이 다음과 같기 때문에 change 이벤트가 더 이상 발생하지 않습니다.

lastValue == true (잘못됨)
nextValue == true (잘못됨)

전반적으로 문제는 React가 onClick 의 preventDefault가 호출되기 전에 노드의 checked 값이 무엇인지 DOM에 요청하는 것 같습니다.

이 문제를 파헤치는 데 도움을 주신 @karelskopek 및 @Mintaffee 에게 감사드립니다.

@aweary 이것이 해결할 가치가 있다고 생각하십니까?

이건 진전이 없나요? React v16.2를 사용하고 있으며 동작은 동일합니다. onChange가 처음으로 트리거되고 후속 클릭이 트리거되지 않습니다. 여기서 우선 순위가 높은 이슈라고하겠습니다 ..

관련이 있습니까? preventDefault 체크 박스 onChange 에서 호출되면 React와 브라우저 상태가 동기화되지 않습니다 : https://codesandbox.io/s/0qpr936xkv

React 16.8.6에서 여전히 문제입니다. 한 가지 가능한 해결 방법은 onClick 핸들러에서 모든 작업을 수행하는 것입니다.

const radios = ['one', 'two', 'three'];

class Row extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  render() {
    const { value } = this.props;
    return (
      <div className="row">
        <div className="radio-group">
          {radios.map(radio => (
            <label key={radio} className="radio">
              <input
                type="radio"
                name="radio"
                value={radio}
                checked={radio === value}
                onClick={this.onClick}
                onChange={this.onChange}
              /><span>Radio</span>
            </label>
          ))}
        </div>
      </div>
    );
  }

  onClick(event) {
    // Check something to prevent radio change
    if (...) {
      event.preventDefault();
      return;
    }
    // Sync value in the store
    this.props.setValue(event.target.value);
  }
  onChange() {
    // We need this empty handler to suppress React warning:
    // "You provided a `checked` prop to a form field without an `onChange` handler.
    // This will render a read-only field. If the field should be mutable use `defaultChecked`.
    // Otherwise, set either `onChange` or `readOnly`"
  }
}

제어 된 구성 요소 를 사용

onChange(event) {
  // Check something to prevent radio change
  if (...) {
    return;
  }
  // Sync value in the store
  this.props.setDateTime(event.target.value);
}

더 간단한 솔루션을 위해 onMouseDown 이벤트에서 e.preventDefault를 수행하여 onChange가 실행되지 않도록 할 수 있습니다.

onMouseDown(e) { if (...) { e.preventDefault(); return; } }