我正在尝试当有人选择啤酒的名称时,弹出相应的啤酒厂的名称。在filterSearch函数中,如果不将其包装在div中,则可以获得要弹出的名称。我一放入和JSX,它就返回Object object。我最终想要返回上面有各种信息的卡片,但现在,我正在逐步进行。
任何帮助都将不胜感激!
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchBeerData } from '../../store/store';
import { bindActionCreators } from 'redux';
// import { Cards } from '../Cards/Cards';
class PopulateDropdowns extends Component {
state = {
beerData: []
}
initialized = false;
componentWillReceiveProps(nextProps){
if(!this.initialized){
this.initialized = true;
this.setState({
beerData: nextProps.beerData
})
}
}
componentWillMount(){
this.props.fetchBeerData();
}
populateSelectLists = () => {
let brewArr = this.state.beerData
.sort((a, b) => a[this.props.dataName].localeCompare(b[this.props.dataName]))
.filter((data, index, self) =>
index === self.findIndex((d) => (
d[this.props.dataName] === data[this.props.dataName]
))
)
let newBrewArr = brewArr.map((e, index) =>
<option key={index}> {e[this.props.dataName]} </option>
)
return(
this.props.dataName==='Brewery Name'
?
<form>
<div className="form-group">
<label htmlFor="exampleFormControlSelect1">{this.props.label}</label>
<select className="form-control" id="brew-form-select">
{newBrewArr}
</select>
</div>
</form>
:
<form>
<div className="form-group">
<label htmlFor="exampleFormControlSelect1">{this.props.label}</label>
<select className="form-control" id="beer-form-select">
{newBrewArr}
</select>
</div>
</form>
)
}
handleSubmit = (e) => {
e.preventDefault();
document.getElementById('cardDiv').append(this.filterSearch())
}
filterSearch = () => {
let brewArr = this.state.beerData
let brewMap = brewArr.filter(this.checkValue).map((res, index) => {
return(
<div key={index}>
{res['Brewery Name']}
</div>
)
})
return (brewMap)
}
checkValue = (brew) => {
return brew['Beer Name'] === this.selectValue()
}
selectValue = () => {
let brewVal = document.getElementById('brew-form-select').value
let beerVal= document.getElementById('beer-form-select').value
return (this.props.dataName==='Brewery Name' ? brewVal : beerVal)
}
render() {
return (
<div id='mainDiv'>
{this.populateSelectLists()}
<div className='col-12 text-center' id='cardDiv'></div>
<button type='submit' onClick={this.handleSubmit}>SUBMIT</button>
</div>
)
}
}
const mapStateToProps = state => {
if (state.beerData.length > 0) {
return {
beerData: state.beerData
}
} else {
return {};
}
};
const mapDispatchToProps = dispatch => {
return bindActionCreators({ fetchBeerData }, dispatch)
};
export default connect(mapStateToProps, mapDispatchToProps)(PopulateDropdowns);
https://stackoverflow.com/questions/51163339
复制相似问题