やりたいこと:
Reactです。
JSONファイルから読み込んだデータがあります。
[ { "id": "1", "name": "Blue Shirt", "price": "$4.99", "image": "shirt01.jpg", "size": "S", "category": "shirt" }, { "id": "2", "name": "Winter Shirt", "price": "$10.99", "image": "skirt03.jpg", "size": "L", "category": "skirt" }, { "id": "3", "name": "Black Jacket", "price": "$44.99", "image": "shirt03.jpg", "size": "S", "category": "jacket" }, { "id": "4", "name": "Blue Medium Shirt", "price": "$6.99", "image": "pants01.jpg", "size": "M", "category": "pants" } ]
ラジオボタンのvalueを使用し、Size: S のものだけを表示させたり、Category: Shirt のものだけを表示させたいと思っています。
ラジオボタンは下記のとおりです。
class SideBar extends React.Component { constructor(props){ super(props) this.state = { checkBoxChecked: false } } handleCheckbox = (event) => { this.setState({checkBoxChecked: !this.state.checkBoxChecked}); this.props.onChange(event.target.value); } render() { return ( <div> <ul className="category_list"> <li><input type="radio" name="category" value="shirt" onChange={this.handleCheckbox}/>Shirts</li> <li><input type="radio" name="category" value="pants" id=""/>Pants</li> <li><input type="radio" name="category" value="skirt" id=""/>Skirt</li> <li><input type="radio" name="category" value="jacket" id=""/>Jacket</li> </ul> <ul className="size_list" onChange={this.handleCheckbox}> <li><input type="radio" name="size" value="S" id=""/>S</li> <li><input type="radio" name="size" value="M" id=""/>M</li> <li><input type="radio" name="size" value="L" id=""/>L</li> </ul> </div> ); } }
親コンポーネントは下記のとおりです。
import React from 'react'; import SideBar from './SideBar'; import MainProduct from './ProductList'; import './App.scss'; import fashion from '../data/fashion.json'; class App extends React.Component { state = { products: fashion, filter: null, checked: false } setFilter = (condition) => { console.log("condition before setState", condition); this.setState({ filter: condition }); console.log("condition setState", this.state.filter); // setStateされていない console.log("checked setState", this.state.checked); } test = (key) => { console.log("The value of checkbox:", key); this.state.products.map((item) => { if(key === item.size) { console.log("Size", item.size); this.setState({ products: fashion }) } else if(key === item.category) { console.log("Category", item.category); } }); } render() { return ( <div className="wrapper"> <div className="sidebar"> <SideBar onChange={this.setFilter} /> </div> <main> <MainProduct products = {this.state.products} /> </main> </div> ); } } export default App;
まだ何も形にできていないのですが、2日以上調べているのですが、どのように実装したらいいか解決策が見えずにいます。これは、どのように実装すれば実現できるのでしょうか。
"React ラジオボタン フィルター json" "React radio button json filter"などのキーワードでたくさん探したのですが、思う通りの実装が出来ずにいます。
どなたかお力をお貸しいただけないでしょうか。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。