demo for Chinese IME input

Starting point for creating JSFiddles with React. This uses React with Addons.

by karlovac

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

React

const allItems =  ['長瀨純', '日永梨枝子', '高原步美', '鮎川天理', '春日檜', '中川加儂', '小阪千尋', '春日楠', 'abc string', 'test string']

let onComposition = false


class SearchList extends React.Component {
  constructor(){
    super()

    this.state={
      inputValue: '',
      items: allItems
    }
  }

  handleComposition  = (event) => {

    if(event.type === 'compositionend'){
      onComposition = false
      
      //fire change method to update for Chrome v53
      this.handleChange(event)
    
    } else{
      onComposition = true
    }
  }

  handleChange = (event) => {
    const input = event.target.value
    let newItems = allItems
    const oldItems = this.state.items


    if(!onComposition){
        if(input.trim() !== ''){
        }

        this.setState({
          inputValue: event.target.value,
        })
    }
  }

  render() {

    return <div>
      <input type="text" onCompositionStart={this.handleComposition} onCompositionUpdate={this.handleComposition} onCompositionEnd={this.handleComposition} onChange={this.handleChange} />


    </div>
  }
}

ReactDOM.render(
    <SearchList initText={"輸入要搜尋的字串!"}/> , document.getElementById('container'))