流星反応-オートサジェストを - 欠落クラスのプロパティは、私は流星が反応使って反応-選択候補は、基本的な使用例から（ワーキング取得しようとしている

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 />を使用しています。

これは、メテオール1.4.1.1で試験された。