유성 반응-자동 제안을 - 누락 클래스 속성 내가 유성 반응 사용하고 반응-자동 제안 기본적인 사용 예에서 (작업 얻으려고

Question

변환 https://github.com/moroshko/react-autosuggest

내가 오류가 Missing class properties transform - 그것은 (오른쪽의 onChange에서 무슨 일이 일어나고 후 this.state.

this.state = { 
 
     value: '', 
 
     suggestions: getSuggestions('') 
 
    }; 
 
    } 
 

 
    onChange = (event, { newValue }) => { 
 
    this.setState({ 
 
     value: newValue 
 
    }); 
 
    }; 
 

 
    onSuggestionsUpdateRequested = ({ value }) => { 
 
    this.setState({ 
 
     suggestions: getSuggestions(value) 
 
    }); 
 
    };

내가 솔루션,하지만 행운을 찾을 수 있는지 확인하기 위해 주위를 둘러 보았다했습니다.

누군가가 어떤 일이 벌어지고 있는지 알 수 있기를 바랍니다.

Answer 1

class Example extends React.Component {...}을 사용하면 유성에는 사용할 수 없습니다. 대신이 방법을 시도해보십시오

import React from 'react'; 
import Autosuggest from 'react-autosuggest'; 
import AutosuggestHighlight from 'autosuggest-highlight'; 

Example = React.createClass({ 
    getInitialState() { 
    return { 
     value: '', 
     suggestions: [], 
    }; 
    }, 

    onChange(event, { newValue }) { 
    this.setState({ 
     value: newValue, 
    }); 
    }, 

    onSuggestionsFetchRequested({ value }) { 
    this.setState({ 
     suggestions: this.getSuggestions(value), 
    }); 
    }, 

    onSuggestionsClearRequested() { 
    this.setState({ 
     suggestions: [], 
    }); 
    }, 

    getSuggestionValue(suggestion) { 
    return suggestion.name; 
    }, 

    getSuggestions(value) { 
    const languages = [ 
     { 
     name: 'C', 
     year: 1973, 
     }, 
     { 
     name: 'C#', 
     year: 2001, 
     }, 
     { 
     name: 'C++', 
     year: 1984, 
     }, 
     { 
     name: 'Clojure', 
     year: 2008, 
     }, 
     { 
     name: 'Elm', 
     year: 2013, 
     }, 
     { 
     name: 'Go', 
     year: 2010, 
     }, 
    ]; 
    const inputValue = value.trim().toLowerCase(); 
    const inputLength = inputValue.length; 

    if (inputLength === 0) { 
     return []; 
    } 

    return languages.filter(language => 
     language.name.toLowerCase().slice(0, inputLength) === inputValue 
    ); 
    }, 

    renderSuggestion(suggestion, { query }) { 
    const suggestionText = `${suggestion.name} (${suggestion.year})`; 
    const matches = AutosuggestHighlight.match(suggestionText, query); 
    const parts = AutosuggestHighlight.parse(suggestionText, matches); 

    return (
     <span className="suggestion-content"> 
     <span> 
      { 
      parts.map((part, index) => { 
       const className = part.highlight ? 'highlight' : null; 

       return (
       <span className={className} key={index}>{part.text}</span> 
      ); 
      }) 
      } 
     </span> 
     </span> 
    ); 
    }, 

    render() { 
    const { value, suggestions } = this.state; 
    const inputProps = { 
     value, 
     placeholder: 'Enter programming language...', 
     onChange: this.onChange, 
    }; 

    return (
     <div> 
     <Autosuggest 
      suggestions={suggestions} 
      onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} 
      onSuggestionsClearRequested={this.onSuggestionsClearRequested} 
      getSuggestionValue={this.getSuggestionValue} 
      renderSuggestion={this.renderSuggestion} 
      inputProps={inputProps} /> 
     </div> 
    ); 
    }, 
}); 

그럼 간단하게 자동 제안 필드를 렌더링 <Example />를 사용합니다.

이 내용은 Meteor 1.4.1.1