Question

我在表单上有一个选择组件。我尝试将搜索功能结合到其中。我在组件上进行了一次onchange，它符合我的要求，但是我很困惑与当前数据进行比较，以便运行此搜索功能

这是我的代码

const searchChange = (data) => {
            search_value       = []
            let new_data       = _.cloneDeep(dataOpt)
            let keyword        = _.isString(data) ? data : null
            let fixed_data     = _.isEmpty(data) ? dataOpt : _.filter(new_data, u => _.toLower(u.email).indexOf(_.toLower(keyword)) > -1 )
            people_value = fixed_data
        }  

const peopleChange  = (data) => {
        people_value = data
        return people_value;
}

渲染：

<Form.Item label="People">
    <Select
        showSearch
        mode            = "multiple"
        placeholder     = "Choose People, you want inviting"
        onChange        = {(e) => peopleChange(e)}
        style           = {{ width: '100%' }}
        notFoundContent = {null}
        onSearch        = {(e) => searchChange(e)}
    >
        {!_.isNil(filteredOptions) && filteredOptions.map(item =>(
            <Select.Option key={Math.random()} value={item._id}>{item.email}</Select.Option> 
            ))  
        }
    </Select>
</Form.Item>

dataOpt格式：

[
  {
    "_id": "5d22f0b56fc5841b7caacda5",
    "address": "",
    "status": "temporary delete",
    "email": "ccc@ccc.com",
    "name": "Monkey D Luffy",
    "phone": "1234"
  },
  {
    "_id": "5d26d9ccf2d1fc17b4d79ab1",
    "address": "",
    "status": "temporary delete",
    "email": "kopral@kopral.com",
    "name": "kopral@jono.com",
    "phone": "12345"
  },
  {
    "_id": "5d2d2be4f471124ad4c0b019",
    "address": "",
    "status": "not verified",
    "email": "asd@asd.com",
    "name": "asdfff",
    "phone": "1234"
  }
]

谢谢。

Answer 1

您可以使用function cape(inre) { if (/[iy]/.test(inre.flags)) return // these flags are not "simple" instr = inre.source outstr = '' special = '\\^$*+?.()|{}[]' // these so-called non-special characters after \ are not "simple": non_special = 'bBdDsSwW123456789' function pint(base, size) { // helper function for \0, \xhh and \uhhhh for (n = l = 0; l < size && !isNaN(d = parseInt(instr[i+1], base)); ++i, ++l) n = n*base+d return String.fromCharCode(n) } for (i = 0; c = instr[i]; outstr += c, ++i) { // convert input sequence to output text if possible if (c == '\\') { if (0 <= special.indexOf(c = instr[++i])) ; else if (0 <= non_special.indexOf(c)) return; else if (c == 'c') c = String.fromCharCode(instr.charCodeAt(++i)&31); else if (c == 'f') c = '\f'; else if (c == 'n') c = '\n'; else if (c == 'r') c = '\r'; else if (c == 't') c = '\t'; else if (c == 'v') c = '\v'; else if (c == '0') c = pint(8, 3); else if (c == 'x') c = pint(16, 2); else if (c == 'u') c = pint(16, 4) } else if (0 <= special.indexOf(c)) return } return outstr } console.log('input regex simple text form (if possible)') console.log('--------------------------------------------------') testcases = [/foo\.bar/, /foo/, /ba\[12\]r/, /ba.*foo/] for (i in testcases) s = testcases[i], console.log(s.source, ' '.repeat(11-s.source.length), '---> ', cape(s))属性来过滤数据。这是您的数据示例：

filterOption

如何在React Hooks中使用Antd搜索

1 个答案: