react按照指定条件搜索后，将搜索池中存在的数据变颜色显示

语言：react+ant design        编译器：VS code        环境：macOS Big Sur

使用类组件

需求：下拉框选择姓名或手机号，输入框中输入相应的值，点击搜索按钮后，遍历下边搜索池中的数据。

效果：输入框中为空时，提示“请输入信息”；输入框输入的值在搜索池中时，数据标红显示；输入框输入的值不在搜索池中时，提示“暂无此信息”。

具体的展示图在这

 具体代码实现：

import { Input, Select, AutoComplete, Button, Tag, message} from 'antd';
import React from 'react'

const { Option } = Select;

class Test extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            search:{
                choose: 'name', //选择姓名还是手机号
                name:'',    //姓名
                phone:'',   //手机号
                value:''    //输入框中的值
            },
            messageGroup:[
                { 
                    'name': '第一位',
                    'id':0,
                    'color': 'black',
                },
                {
                    'name': '第二位',
                    'id': 1,
                    'color': 'black',
                },
            ]
        }
    }
    //获取输入框
    getMessage = () =>{
        if (!this.state.search.value) {
            message.info('请输入信息')
            return
        }
        if (this.state.search.choose === 'name') {
            this.searchByName()
        }
    }
    //按照姓名搜索
    searchByName = () => {
        let binal = false
        let messagegroup = this.state.messageGroup.map(ele => {
            if (ele.name.includes(this.state.search.value)) {
                ele.color = 'red'
                binal = true
            }
            else {
                ele.color = ''
            }
            return ele
        })
        if (!binal) {
            message.info('暂无此信息')
        } else {
            this.setState({
                messageGroup: messagegroup
            })
        }
    }
    render(){
        return (
            <div className="site-input-group-wrapper">
                <br />
                <Input.Group compact>
                    <Select style={{ width: '10%', marginLeft: 20}} value={this.state.search.choose}
                        onChange = {(e) => {
                            this.setState({
                                search:{
                                    ...this.state.search,
                                    choose: e,
                                    name: e === 'name' ?this.state.search.value :'',
                                    phone: e === 'phone' ? this.state.search.value :''
                                }
                            })
                        }}
                    >
                        <Option value="name">姓名</Option>
                        <Option value="phone">手机号</Option>
                    </Select>
                    <AutoComplete
                        style={{ width: '20%', marginLeft: 20}}
                        placeholder="请输入内容"
                        value = { this.state.search.value }
                        onChange = { (e) => {
                            this.setState({
                                search:{
                                    ...this.state.search,
                                    value: e,
                                    name: this.state.search.choose === 'name' ? e : '',
                                    phone: this.state.search.choose === 'phone' ? e : ''
                                }
                            })
                        }}
                    />
                    <Button
                        type="primary"
                        onClick = {this.getMessage}
                        style={{ marginLeft:20 }}
                    >搜索</Button>
                    <div style={{
                        width: 600,
                        minHeight: 60,
                        border: '1px solid rgb(220, 223, 230)',
                        borderRadius: 3,
                        display: 'flex',
                        flexWrap: 'wrap',
                        padding: '10px 10px 10px 10px',
                        boxSizing: 'border-box',
                        overflowY: 'scroll',
                        marginTop:20,
                        marginLeft:20
                    }}>
                        {this.state.messageGroup.map(ele => {
                            return <div style={{ height: 19, marginTop: 4 }} key={ele.id}>
                                <Tag label={ele.name}
                                    style={{ color: ele.color === 'red' ? 'red' : 'black', width: '70px' }}
                                    closable
                                    // value={ele.name}
                                    onClose={() => {
                                        let all = [...this.state.messageGroup]
                                        // let index = all.findIndex(clc => {
                                        //     return clc.id === ele.id
                                        // });
                                        // all.splice(index, 1);
                                        this.setState({
                                            messageGroup: all
                                        }, () => {

                                        })
                                    }} >{ele.name}</Tag>
                            </div>
                        })}
                    </div>
                </Input.Group>
            </div>
        )
    }
};

export default Test