我有一个JSON虚拟数据显示在网页上,有一个搜索框可根据输入的关键字过滤数据。以前,在制作filteredJson
之前,所有数据都显示良好。但是,现在什么也没有显示。怎么了?
最终,我想将数据提交给另一个包含单击按钮时呈现表格的函数。考虑到这一点,我应该在onSubmit()
内做什么?
JSON:
let barang = [{
"id" : "001",
"nama_barang" : "bolu kuwuk",
"harga" : 10000,
"gambar" : bolukuwuk},
{
"id" : "002",
"nama_barang" : "bolu kering",
"harga" : 12000,
"gambar" : bolukering
}
];
和班级:
constructor(props) {
super(props)
this.state = {
json: [],
search: ''
}
}
componentDidMount() {
this.setState((prevState) => {
return {
json: barang
}
})
}
updateSearch(event){
this.setState({search : event.target.value.substr(0,20)});
}
render() {
let filteredJson = this.state.json.filter(
(data) => {
data.nama_barang.indexOf(this.state.search) !== -1;
}
);
return (
<div>
<div className="field has-addons">
<div className="control">
<input className="input" type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} placeholder="Cari Barang . . . "/>
</div>
<div className="control">
<a className="button is-info">
<i className="fa fa-search"></i>
</a>
</div>
</div>
<section className="products">
{filteredJson.map((data, i) => {
return (
<div className="product-card" key={i}>
<div className="product-image">
<img src={ data.gambar }/>
</div>
<div className="product-info">
<h5>{data.nama_barang}</h5>
<h6>{data.harga}</h6>
<p>Masukkan Jumlah yang dibeli : </p><input type="number"/><br/><br/>
<button className="button is-success btn-product" onClick={this.onSubmit}><i className="fa fa-shopping-cart"></i> Beli</button>
</div>
</div>);
})}
</section>
</div>
);
}
}
答案 0 :(得分:0)
您的return
:
.filter
声明
let filteredJson = this.state.json.filter(
(data) => {
return data.nama_barang.indexOf(this.state.search) !== -1;
}
);
演示:
要在点击时提交,最好将每个项目提取到一个单独的组件中并使用道具:
let barang = [
{
id: '001',
nama_barang: 'bolu kuwuk',
harga: 10000,
gambar: 'asdf'
},
{
id: '002',
nama_barang: 'bolu kering',
harga: 12000,
gambar: 'asdf'
}
];
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
json: [],
search: ''
};
}
componentDidMount() {
this.setState(prevState => {
return {
json: barang
};
});
}
updateSearch = (event) => {
this.setState({search: event.target.value.substr(0, 20)});
}
onSubmit = (data) => {
console.log('submit data', data);
}
render() {
let filteredJson = this.state.json.filter(data => {
return data.nama_barang.indexOf(this.state.search) !== -1;
});
return (
<div>
<div className="field has-addons">
<div className="control">
<input
className="input"
type="text"
value={this.state.search}
onChange={this.updateSearch.bind(this)}
placeholder="Cari Barang . . . "
/>
</div>
<div className="control">
<a className="button is-info">
<i className="fa fa-search" />
</a>
</div>
</div>
<section className="products">
{filteredJson.map((data, i) => {
return (
<Product
key={i}
data={data}
onProductClick={this.onSubmit}
/>
);
})}
</section>
</div>
);
}
}
class Product extends React.Component {
onClick = () => {
this.props.onProductClick(this.props.data);
}
render() {
const {data} = this.props;
return (
<div className="product-card">
<div className="product-image">
<img src={data.gambar} />
</div>
<div className="product-info">
<h5>{data.nama_barang}</h5>
<h6>{data.harga}</h6>
<p>Masukkan Jumlah yang dibeli : </p>
<input type="number" />
<br />
<br />
<button className="button is-success btn-product" onClick={this.onClick}>
<i className="fa fa-shopping-cart" /> Beli
</button>
</div>
</div>
);
}
}
ReactDOM.render(
<Test />,
document.getElementById('app')
);
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />
&#13;
答案 1 :(得分:0)
如果您希望依靠ES6语法,则可以这样编写,从而在过滤器中获得隐式返回:
descriptionLabel
另外,请注意,由于在分配变量后不会对变量进行突变,因此const filteredJson = this.state.json.filter(data => data.nama_barang.indexOf(this.state.search) !== -1);
应该是filteredJson
而不是const
:)