Сделать list.js и react.js работать вместе

Это код vanila для запуска list.js в браузере. И это работает без проблемСделать list.js и react.js работать вместе

<script src="http://listjs.com/no-cdn/list.js"></script> 
<div id="users"> 
<input class="search" placeholder="Search" /> 
<ul class="list"> 
    <li> 
     <h3 class="name">Jonny Stromberg</h3> 
    </li> 
    <li> 
     <h3 class="name">Jonas Arnklint</h3> 
    </li> 
    <li> 
     <h3 class="name">Martina Elm</h3> 
    </li> 
</ul> 
</div> 
<script> 
var options = { valueNames: [ 'name' ] }; 
var userList = new List('users', options); 
</script>

Так я думал, что это будет просто, что в реакции, я попробовал этот

import React from "react"; 
import ReactDOM from "react-dom"; 

    class Home extends React.Component{ 
     componentDidUpdate(){ 
      const options = { valueNames: [ 'name' ] }; 
      const userList = new List('users', options); 
     } 
     render(){ 
      return(
       <div id="users"> 
        <input class="search" placeholder="Search" /> 
        <ul class="list"> 
         <li> 
          <h3 class="name">Jonny Stromberg</h3> 
         </li> 
         <li> 
          <h3 class="name">Jonas Arnklint</h3> 
         </li> 
         <li> 
          <h3 class="name">Martina Elm</h3> 
         </li> 
        </ul> 
       </div> 
      ) 
     } 
    } 

    const app = document.getElementById('app'); 

    ReactDOM.render(<Home />, app);

index.html

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
<div id="app"></div> 
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script> 
<script src="bundle.js"></script> 
</body> 
</html>

Но это не работает. И специально никакой ошибки вообще. Что можно сделать здесь?

источник

2016-04-12 angry kiwi

Вы можете сделать это так, но это не React way, я думаю, что существует множество компонентов React для фильтрации списков.

class Home extends React.Component{ 
    componentDidMount() { 
    const options = { valueNames: [ 'name' ] }; 
    const userList = new List(this.refs.users, options); 
    } 

    render() { 
    return <div ref="users"> 
     <input className="search" placeholder="Search" /> 
     <ul className="list"> 
     <li><h3 className="name">Jonny Stromberg</h3></li> 
     <li><h3 className="name">Jonas Arnklint</h3></li> 
     <li><h3 className="name">Martina Elm</h3></li> 
     </ul> 
    </div> 
    } 
};

Example

Примечание - в React вы должны использовать className вместо class

Пример без List.js

class Home extends React.Component { 
    constructor() { 
    super(); 
    this.handleChange = this.handleChange.bind(this); 

    this.state = { 
     names: ['Jonny Stromberg', 'Jonas Arnklint', 'Martina Elm'] 
    }; 
    } 

    handleChange(e) { 
    const condition = new RegExp(e.target.value, 'i'); 
    const names = this.state.names.filter(name => { 
     return condition.test(name); 
    }); 

    this.setState({ 
     names 
    }) 
    } 

    render() { 
    const names = this.state.names.map((name, index) => { 
     return <li key={ index }> 
     <h3 className="name">{ name }</h3> 
     </li> 
    }); 

    return <div> 
     <input 
     className="search" 
     placeholder="Search" 
     onChange={ this.handleChange } 
     /> 
     <ul className="list">{ names }</ul> 
    </div> 
    } 
};

Example

источник

2016-04-12 12:39:05

Сделать list.js и react.js работать вместе

ответ

Смежные вопросы