我在数组中有任意数量的对象,并且每个对象都有一个嵌套的subValues数组。我正在努力能够使用搜索过滤组件。我能够成功搜索父级对象,但是我仍然希望能够基于每个顶级嵌套值数组进行过滤。
就我而言,我可以搜索value
(它是一个字符串),但是我不知道如何搜索subValues
(它是一个包含任意数量的字符串的数组。) / p>
在下面的代码段中,您可以看到搜索“一”,“二”等将返回父级value
,但是如果您尝试搜索“子”,则不会返回任何内容。数组subValues
。
jsfiddle here。下面的代码段。
任何指导将不胜感激。
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
currentValue: null,
search: '',
}
}
updateSearch = (event) => {
this.setState({
search: event.target.value,
})
}
render() {
const Values = {
valuesList: [{
value: 'value one',
subValues: [
'sub value one',
'sub value two',
]
}, {
value: 'value two',
subValues: [
'sub value three',
'sub value four',
]
}, {
value: 'value three',
subValues: [
'sub value five',
'sub value six',
]
}
]
};
let filteredValues = Values.valuesList.filter(
(values) => {
return (
values.value.toLocaleLowerCase().indexOf(this.state.search.toLocaleLowerCase()) !== -1
);
}
);
var renderValues = filteredValues.map((valueItem, i) => {
var renderSubValues = valueItem.subValues.map((subValues, j) => {
return (
<p key={j}>{subValues}</p>
)
});
return (
<div
onClick={() => this.getValue(valueItem.value)}
key={i}
>
<p>{valueItem.value}</p>
<p>{renderSubValues}</p>
</div>
)
})
return (
<div>
<input
placeholder="search"
type="text"
value={this.state.search}
onChange={this.updateSearch.bind(this)}
/>
{renderValues}
</div>
)
}
}
ReactDOM.render(<App/>, document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
}
div {
padding-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
答案 0 :(得分:1)
可以修改您的过滤器方法以同时检查subValues
。
我们可以将JavaScript的some()方法与includes()一起使用。
let filteredValues = Values.valuesList.filter(
(values) => {
return (
values.value.toLocaleLowerCase().includes(this.state.search.toLocaleLowerCase()) ||
values.subValues.some(item => item.toLocaleLowerCase().includes(this.state.search.toLocaleLowerCase()))
);
}
);
演示:
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
currentValue: null,
search: '',
}
}
updateSearch = (event) => {
this.setState({
search: event.target.value,
})
}
render() {
const Values = {
valuesList: [{
value: 'value one',
subValues: [
'sub value one',
'sub value two',
]
}, {
value: 'value two',
subValues: [
'sub value three',
'sub value four',
]
}, {
value: 'value three',
subValues: [
'sub value five',
'sub value six',
]
}]
};
let filteredValues = Values.valuesList.filter(
(values) => {
return (
values.value.toLocaleLowerCase().includes(this.state.search.toLocaleLowerCase()) || values.subValues.some(item => item.toLocaleLowerCase().includes(this.state.search.toLocaleLowerCase()))
);
}
);
var renderValues = filteredValues.map((valueItem, i) => {
var renderSubValues = valueItem.subValues.map((subValues, j) => {
return ( <
p key = {
j
} > {
subValues
} < /p>
)
});
return ( <
div onClick = {
() => this.getValue(valueItem.value)
}
key = {
i
} >
<
p > {
valueItem.value
} < /p> <
p > {
renderSubValues
} < /p> < /
div >
)
})
return ( <
div >
<
input placeholder = "search"
type = "text"
value = {
this.state.search
}
onChange = {
this.updateSearch.bind(this)
}
/> {
renderValues
} <
/div>
)
}
}
ReactDOM.render( < App / > , document.querySelector("#app"))
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
}
div {
padding-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>