这是在浏览器中运行list.js的vanila代码。它没有问题
<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>
但它不起作用。特别是没有任何错误。在这可以做些什么?
答案 0 :(得分:2)
你可以这样做。但是它不是 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>
}
};
注意 - 在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>
}
};