1
everyone。私は、異なる基準でプラネタリウムのショーをフィルタリングすると思われるReact Appを持っています。オブジェクト内の配列からドロップダウンし、オブジェクトとフィルターデータを入力します。
がvar shows = [
{ id: 1, name: 'Black Holes', showType: 'Full Dome', age: 'All Ages', grade: ['Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_blackholes.png'},
{ id: 2, name: 'Astronaut', showType: 'Full Dome', age: 'All Ages', grade: ['Early Elementary,',' Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_astronaut.png'},
{ id: 3, name: 'Laser Holidays', showType: 'Laser', age: '18+', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_laserholidays.png'},
{ id: 4, name: 'The Gruffalo', showType: 'Flat Screen', age: 'All Ages', grade: ['Pre-K', 'Kinder'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_gruffalo.png'},
{ id: 5, name: 'Laser iPOP', showType: 'Laser', age: 'All Ages', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_ipop.png'}
];
「ショー」オブジェクトの「グレード」プロパティが複数の値を持つことができ、私は配列でそれらを置くことを決めた：基準の一つは、複数の値を持つことになっています。
私は2つのことが必要です： 1 - 私は、可能なすべての値を持つ "グレード"ドロップダウンを繰り返し値なしで設定する必要があります。 2 - "Show Type"と "Age"ドロップダウンと同様に、ユーザーがそのドロップダウンで選択した内容に応じてフィルタを表示できるようにする必要があります。どのようにこれを行う上の任意のアイデア？ありがとう。
var shows = [
{ id: 1, name: 'Black Holes', showType: 'Full Dome', age: 'All Ages', grade: ['Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_blackholes.png'},
{ id: 2, name: 'Astronaut', showType: 'Full Dome', age: 'All Ages', grade: ['Early Elementary,',' Late Elementary', 'High School'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_astronaut.png'},
{ id: 3, name: 'Laser Holidays', showType: 'Laser', age: '18+', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_laserholidays.png'},
{ id: 4, name: 'The Gruffalo', showType: 'Flat Screen', age: 'All Ages', grade: ['Pre-K', 'Kinder'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_gruffalo.png'},
{ id: 5, name: 'Laser iPOP', showType: 'Laser', age: 'All Ages', grade: ['Late Elementary', 'High School', 'College'], cover:'http://www.starsatnight.org/sciencetheater/assets/File/200x300_ipop.png'}
];
// FilterForm React Class
var FilterForm = React.createClass({
getInitialState: function() {
return {
data: this.props.data,
showType: '',
age: '',
grade: '',
}
},
filterItems: function(val, type){
switch (type) {
case 'showType':
this.setState({showType: val});
break;
case 'age':
this.setState({age: val});
break;
case 'grade':
this.setState({grade: val});
break;
default:
break;
}
},
render: function() {
var filteredItems = this.props.data;
var state = this.state;
["showType", "age", "grade"].forEach(function(filterBy) {
var filterValue = state[filterBy];
if (filterValue){
filteredItems = filteredItems.filter(function(item){
return item[filterBy] === filterValue;
});
}
});
var showTypeArray = this.props.data.map(function(item) {return item.showType});
var ageArray = this.props.data.map(function(item) {return item.age});
// This array gets once instance of all grade options since one show can be good for several grades
var gradeArray = this.props.data.map(function(item){
return item.grade;
});
showTypeArray.unshift("");
ageArray.unshift("");
gradeArray.unshift("");
return(
<div className="container">
<FilterOptions
data={this.state.data}
showTypeOptions={showTypeArray}
ageOptions={ageArray}
gradeOptions={gradeArray}
changeOption={this.filterItems} />
<div className="filter-form">
<FilterItems data={filteredItems} />
</div>
</div>
)
}
});
// FilterOptions React Class
var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},
render: function(){
return (
<div className="filter-options">
<div className="filter-option">
<label>Show Type</label>
<select id="showType" value={this.props.showType} onChange={this.changeOption.bind(this, 'showType')}>
{this.props.showTypeOptions.map(function(option) {
return (<option key={option} value={option}>{option}</option>)
})}
</select>
<label>Age</label>
<select id="age" value={this.props.age} onChange={this.changeOption.bind(this, 'age')}>
{this.props.ageOptions.map(function(option) {
return (<option key={option} value={option}>{option}</option>)
})}
</select>
<label>Grade</label>
<select id="grade" value={this.props.grade} onChange={this.changeOption.bind(this, 'grade')}>
{this.props.gradeOptions.map(function(option) {
return (<option key={option} value={option}>{option}</option>)
})}
</select>
</div>
</div>
);
}
});
// FilterItems React Class
var FilterItems = React.createClass({
render: function(){
return(
<div className="filter-items">
<br />
{this.props.data.map(function(item){
return(
<div className="filter-item">{item.id} - {item.name} - {item.showType} - {item.age}</div>
);
})}
</div>
)
}
});
ReactDOM.render(
<FilterForm data={shows}/>,
document.getElementById('show-catalog')
);<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<div id="show-catalog"></div>
あなたは一度に1つの質問をし、あなたが試したこととあなたが遭遇した特定の問題を含めると、助けを得る可能性が高くなります。 –
ありがとう、ヨルダン。私が持っているコードは私が試したものです。次回はそれを念頭に置いておきます。 –