todoList
添加时渲染效果
模糊搜索时渲染效果
以下为实现代码
<div id="app"></div>
<script type="text/babel">
// App 组件
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [],
arr: [], // 放置模糊查找的结果,
state: true, // true 添加删除修改状态 false 就是模糊查找状态
}
}
// 添加
add = (e) => {
if (e.keyCode === 13) { // 向数组里添加一项
// console.log(e.target.value); // 获取 value 值
// console.log(this.node.value); // 获取 value 值
if (this.node.value === '') return; // 文本框为空,不添加
// this.state.list.push(this.node.value)
this.setState({
list: [this.node.value, ...this.state.list]
}, () => {
this.node.value = ''; // 添加以后清空文本框内容
})
}
};
// 删除
remove(index) {
// confirm() 消息确认框,确认 true,取消 false
if (confirm('确认要删除吗?')) {
// 第 1 种删除方法
// const list = this.state.list.splice(index, 1);
// this.setState({
// list: this.state.list,
// });
// 第 2 种删除方法
this.setState({
list: this.state.list.filter((item, idx) => idx !== index),
})
}
}
// 修改
modify(index) {
// prompt() 消息提示框,接收 2 个参数,第 1 个参数:提示框的提示标题,第 2 个参数,提示框默认值
// 确认返回输入内容,取消返 null
const newValue = prompt('修改', '请输入修改的内容');
// console.log(newValue); // 提示框输入的内容
this.state.list[index] = newValue;
if (newValue) {
this.setState({
list: this.state.list
})
}
}
// 模糊查找
blurFind = () => {
// 获取查找的关键字
const keyWord = prompt('查找', '请输入关键字');
// 实现模糊查找
// this.setState({
// state: false, // 切换到查找的状态
// arr: this.state.list.filter((item => item.includes(keyWord))),
// });
// 实现模糊查找和高亮
// 获取查找到的结果
let result = this.state.list.filter(item => item.indexOf(keyWord) !== -1);
// 关键字高亮
result.forEach((item, index, arr) => {
// arr[index] = "<div>" + item.replace(new RegExp(keyWord, "g"), "<span style='color:red'>" + keyWord + "</span>") + "</div>"
arr[index] = `<div>${item.replace(new RegExp(keyWord, 'g'), `<span style="color:red">${keyWord}</span>`)}</div>`
});
console.log(result);
this.setState({
state: false, // 切换到查找的状态
arr: result,
});
};
list = () => {
this.setState({
state: true,
arr: [],
})
};
render() {
const {list, arr} = this.state;
return (
<div>
<input onKeyUp={this.add} ref={node => this.node = node} type="text"/>
<button onClick={this.blurFind}>模糊查找</button>
<button onClick={this.list} style={{display: this.state.state ? 'none' : 'inline-block'}}>返回
</button>
<ul style={{display: this.state.state ? 'block' : 'none'}}>
{
list.map((item, index) => {
return (
<li key={index}>
{item}
<button onClick={this.remove.bind(this, index)}>删除</button>
<button onClick={this.modify.bind(this, index)}>修改</button>
</li>
)
})
}
</ul>
<ul>
{
arr.map((item, index) => {
return (
<li key={index}>
{<div dangerouslySetInnerHTML={{__html: item}}></div>}
</li>
)
})}
</ul>
</div>
)
}
}
ReactDOM.render(<App/>, document.querySelector('#app'));
</script>