JSFiddle - React, Tailwind, and code Playground

by Eddy Chang

HTML

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

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

let onComposition = false


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

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

  // handleChange  = (event) => {
  //   console.log(event);
  //   console.log(event.target.value);
  //
  //   console.log(onComposition)
  //
  //   if(!onComposition){
  //     this.setState({
  //       inputValue: event.target.value
  //     })
  //   }
  //
  // }

  handleComposition = (event) => {
    console.log(event);
    console.log(event.target.value);

    if (event.type === 'compositionend') {
      onComposition = false
    } else {
      onComposition = true
    }
  }

  handleEventLog = (event) => {
    console.log(event);
  }

  handleChange = (event) => {
    console.log(event);
    console.log(event.target.value);

    const input = event.target.value
    let newItems = allItems
    const oldItems = this.state.items


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

        console.log(input);

        newItems = oldItems.filter(function(value) {
          const result = value.indexOf(input)

          console.log(value, input, result);
          return (result === -1) ? false : true
        })
      }

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

  render() {
    const items = this.state.items

    return <div >
      < input type = "text"
    onCompositionStart = {
      this.handleComposition
    }
    onCompositionUpdate = {
      this.handleComposition
    }
    onCompositionEnd = {
      this.handleComposition
    }
    onChange = {
      this.handleChange
    }
    /> < ul > {
      items.map((value, index) => {
        return <li key = {
          index
        } > {
          value
        } < /li>
      })
    } < /ul>

    < /div>
  }
}

ReactDOM.render( < SearchList initText = {
      "輸入要搜尋的字串!"
    }
   ...