JSX 및 React에서 onBlur 사용

JSX 및 React에서 onBlur 사용

사용자가 확인 필드를 떠난 후에만 오류를 표시하는 비밀번호 확인 기능을 생성하려고 합니다.저는 페이스북의 리액트 JS와 함께 일하고 있습니다.입력 컴포넌트는 다음과 같습니다.

<input
    type="password"
    placeholder="Password (confirm)"
    valueLink={this.linkState('password2')}
    onBlur={this.renderPasswordConfirmError()}
 />

이것은 render Password Confirm Error 입니다.

renderPasswordConfirmError: function() {
  if (this.state.password !== this.state.password2) {
    return (
      <div>
        <label className="error">Please enter the same password again.</label>
      </div>
    );
  }  
  return null;
},

페이지를 실행할 때 모순되는 비밀번호를 입력해도 메시지가 표시되지 않습니다.

여기에는 몇 가지 문제가 있습니다.

1: onBlur가 콜백을 예상하여 전화를 걸고 있다.renderPasswordConfirmErrornull인 반환값을 사용합니다.

2: 오류를 렌더링할 장소가 필요합니다.

3: "그리고 검증"을 추적하려면 플래그가 필요합니다. 이 플래그는 흐릿하면 true로 설정됩니다.원하는 동작에 따라 필요에 따라 False on Focus로 설정할 수 있습니다.

handleBlur: function () {
  this.setState({validating: true});
},
render: function () {
  return <div>
    ...
    <input
        type="password"
        placeholder="Password (confirm)"
        valueLink={this.linkState('password2')}
        onBlur={this.handleBlur}
     />
    ...
    {this.renderPasswordConfirmError()}
  </div>
},
renderPasswordConfirmError: function() {
  if (this.state.validating && this.state.password !== this.state.password2) {
    return (
      <div>
        <label className="error">Please enter the same password again.</label>
      </div>
    );
  }  
  return null;
},

언급URL : https://stackoverflow.com/questions/24873485/using-onblur-with-jsx-and-react