让 list.js 和 react.js 一起工作

Question

这是浏览器中运行 list.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>

但它不起作用。特别是完全没有错误。这里可以做什么？

Answer 1

你可以这样做。但它不是 React 方式，我认为有很多 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

让 list.js 和 react.js 一起工作

Make list.js and react.js work together

javascript

listjs

reactjs