代码之家 › 专栏 › 技术社区 › angry kiwi

制作列表。js和react。js一起工作

listjs reactjs javascript

angry kiwi · 技术社区 · 9 年前

这是运行列表的瓦尼拉代码。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);

索引.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>

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

1 回复 | 直到 9 年前

Oleksandr T. 9 年前

你可以这样做。,但事实并非如此 反应方式 ,我认为有很多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