reactjs의 문자 수 제한

Question

일련 번호가 입력되어야하는 입력 상자가 있습니다. 최대 문자 수는 32이므로 문자 수가 32에 도달하면 문자 메시지가 중지되어야합니다. 두 가지 방법으로 시도했지만 모두 방법이 작동하지 않습니다. 첫 번째 방법은 패턴을 정의한 사용자 지정 함수로 상태를 업데이트하려고했습니다. 두 번째 방법은 소품으로 텍스트 필드 구성 요소에서 패턴을 전달하려고했습니다. 구성 요소는 react-mdl이고 패턴이 일치하지 않으면 오류를 표시합니다.

처음 텍스트 필드의 예제 (

<Textfield 
    onChange={(event)=> {this.handleInputChange(event)}} 
    pattern="-?[0-9]*(\.[0-9]+)?" 
    error="Input is not a number!" 
    label="Device Serial Number" 
    floatingLabel 
/> 

<Textfield 
    onChange={(event)=> {this.handleInputChange(event)}} 
    pattern="-?[0-9]*(\.[0-9]{6,32})?" 
    error="Input is not a number!" 
    label="Device Serial Number" 
    floatingLabel 
/> 

첫번째 방법 기본적으로 소품으로 텍스트 필드 구성 요소에 전달되는 패턴을 변경하려고

번째 방법)

const extract = (str, pattern) => (str.match(pattern) || []).pop() || ''; 

const extractPattern = (str) => extract(str, "-?[0-9]*(\.[0-9]+)?"); 

const limitLength = (str, length) => str.substring(0, length); 


export default class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {max_char:32, limit:{}}; 
    this.handleChange = this.handleChange.bind(this); 
    } 


    handleChange(charLength){ 
     console.log('charLength',charLength); 
     this.setState({ 
     max_char:32 - charLength.length, 
     limit:limitLength(extractPattern(charLength), 32), 
     }); 
     console.log('charLength', charLength); 
     // console.log('limitLength', this.state.limit); 
    } 

Answer 1

소품을 사용하면 textArea에 maxLength 속성을 설정할 수 있습니다. 어떤 상수 값을 의미합니다. this.props.customLength=32. 상태로 유효성 검사를 제공하는 것은 좋지 않습니다. 상태에 가능한 한 최소 데이터가 있어야합니다.