ReactJS : 마스크 입력

ReactJS를 사용하여 마스크 된 입력 구성 요소를 만들려고합니다. Mask card number input in React 다음에 오류가 발생합니다 : 개체가 속성 또는 메서드 '마스크'를 지원하지 않습니다.ReactJS : 마스크 입력

게시물이 조금 오래된 것 같아서 변경해야 할 필요가 있었기 때문에 변경해야 할 사항이있을 수 있습니다.

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom' 
import $ from 'jquery'; 

export default class MaskedInput extends Component { 
    constructor(props) { 
     super(props); 
    } 

    componentDidMount() { 
     let $input_elem = $(ReactDOM.findDOMNode(this.maskedInput))[0]; 
     console.log($input_elem); 
//  // now you have a jquery object 
     $input_elem.mask("0000 0000 0000 0000"); 
    } 

    render() { 
     return <input ref={(input)=> {this.maskedInput = input; }} id="cardInput" onChange={this.props.handleChange} type="number" value="" /> 
    } 
}

그래서, 내가 그래서이 줄을 변경 내가

npm install --save jquery-mask-plugin

설치 JQuery와 마스크 - 플러그인을 잃어버린 것 같아요 :

이

내 구성 요소입니다

import $ from 'jquery-mask-plugin';

하지만이 줄에는 오류가 발생합니다.

let $input_elem = $(ReactDOM.findDOMNode(this.maskedInput))[0];

오류 : 기능 내가 마지막에 인덱스를 제거하려고

을 예상하지만 도움이되지 않았다.

출처

2017-04-05 roca323

여기에'componentDidMount'에 문제가있는 것 같습니다 :'$ input_elem.input mask ("0000 0000 0000 0000");'입력과 마스크 사이에는 공백이 있습니다. –

감사합니다. 처음 게시물에 오타가있었습니다. 방금 고쳤어. 난 여전히 같은 오류가 발생했습니다. – roca323

'[0]' –

코드에 this 플러그인을 포함하지 않은 생각하지만, 내가해야하기 때문에 이 솔루션에 jquery를 설치하면 이미 문제를 해결하는 react-maskedinput을 설치할 수 있으며 jquery보다 React에 더 적합합니다.

출처

2017-04-10 16:20:07 roca323

jQuery를 기본적으로 mask 방법이 없습니다, 그래서 당신은 내가 타사 라이브러리를 설치 피하기 위해 내 자신의 구성 요소를 만들고 싶었

출처

2017-04-05 17:05:20

ReactJS : 마스크 입력

답변

관련 문제