英文:
Creating dynamic filter logic using DRY approach
问题
I want to create a reusable filter function that works by passing in three properties
- The users input
- The data type
- The data field that is being queried
So far I have created the following code
const [filteredData, setFilteredData] = useState("");const [filterValue, setFilterValue] = useState("");const handleFilter = (e, type, field) => {setFilterValue(e)if (type === 'text') {const filterLowerCase = e.toLowerCase().trim()const result = props.searchResults.filter(d =>!filterLowerCase || d[field].toLowerCase().includes(filterLowerCase));setFilteredData(result);}}
The issue is I don't know how to dynamically set the 'field' property.
The code works when the 'field' property is replaced with the actual field name, in the example below this is 'task_name'.
const handleFilter = (e, type, field) => {setFilterValue(e)if (type === 'text') {const filterLowerCase = e.toLowerCase().trim()const result = props.searchResults.filter(d =>!filterLowerCase || d.task_name.toLowerCase().includes(filterLowerCase));setFilteredData(result);}}
How can this code be written so that the field can be dynamically set.
英文:
I want to create a reusable filter function that works by passing in three properties
- The users input
- The data type
- The data field that is being queried
So far I have created the following code
const [filteredData, setFilteredData] = useState("");const [filterValue, setFilterValue] = useState("");const handleFilter = (e,type,field) => {setFilterValue(e)if (type === 'text') {const filterLowerCase = e.toLowerCase().trim()const result = props.searchResults.filter(d =>!filterLowerCase || d.field.toLowerCase().includes(filterLowerCase),);setFilteredData(result);}}
The issue is I don't know how to dynamically set the 'field' property.
The code works when the 'field' property is replaced with the actual field name, in the example below this is 'task_name' .
const handleFilter = (e,type,field) => {setFilterValue(e)if (type === 'text') {const filterLowerCase = e.toLowerCase().trim()const result = props.searchResults.filter(d =>!filterLowerCase || d.task_name.toLowerCase().includes(filterLowerCase),);setFilteredData(result);}}
How can this code be written so that the field can be dynamically set.
答案1
得分: 0
你可以使用方括号表示法，就像这样：
const [filteredData, setFilteredData] = useState("");const [filterValue, setFilterValue] = useState("");const handleFilter = (e, type, field) => {setFilterValue(e)if (type === 'text') {const filterLowerCase = e.toLowerCase().trim()const result = props.searchResults.filter(d =>!filterLowerCase || d[field].toLowerCase().includes(filterLowerCase),);setFilteredData(result);}}
英文:
You can use bracket notation like this:
const [filteredData, setFilteredData] = useState("");const [filterValue, setFilterValue] = useState("");const handleFilter = (e,type,field) => {setFilterValue(e)if (type === 'text') {const filterLowerCase = e.toLowerCase().trim()const result = props.searchResults.filter(d =>!filterLowerCase || d[field].toLowerCase().includes(filterLowerCase),);setFilteredData(result);}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论