我很反应/ redux的新人。我有点困惑为什么我的动作在地图功能内部时没有触发。它只是一个简单的标记系统..当用户点击标记时,这个功能只需添加到一个数组,但它也应该检查是否添加了任何重复的值。
import React from 'react';
import {connect} from 'react-redux';
import * as uploadActions from '../../Actions/uploadActions'
class Upload extends React.Component{
constructor(props){
super(props);
this.state = {
suggestionLog:false,
};
this.handleTagSuggestion = this.handleTagSuggestion.bind(this);
}
handleChangeSinglePost(value, id){
this.props.setCaptionText(id,value)
}
renderMaptheSingleUpload(){
return(
this.props.photos.photos.map((data) => {
return(
<div key={data.id} className="WholeWrapperForSingleUpload">
<div className="imageContainerUpload">
<img src={data.blobData} />
</div>
<div className="ImageTitleForUpload">
<form >
<input onBlur={e=>this.handleChangeSinglePost(e.target.value, data.id)} name="caption" type="text" placeholder="Caption This" />
</form>
</div>
</div>
)
})
)
}
handleTagSuggestion(e){
// console.log(e.target.value);
if(e.target.value !== ""){
this.props.searchTag(e.target.value);
this.setState({
suggestionLog:false
})
}else{
this.setState({
suggestionLog:true
})
}
}
handleTagClick(e,data){
e.preventDefault();
this.props.photos.postTags.map((state) => {
if(state == data){
console.log('Same Data')
}else{
console.log("Unique")
this.props.setPostTags(data)
}
})
}
renderSuggestion(){
if(this.state.suggestionLog !== true){
return this.props.loadedTags.suggestionTags.map((data) => {
return <li onClick={(e) => this.handleTagClick(e,data.tagName)} key={data.id}>{data.tagName}</li>
})
}else{
}
}
render(){
// console.log(this.props.loadedTags);
//console.log(this.props.photos)
//console.log(this.state)
return(
<div className="UploaContainer">
<div className="UploadContainerContents">
{this.renderMaptheSingleUpload()}
<div className="tagsForupload">
<ul>
{this.props.photos.postTags.map((data,i) => {
return <li key={i}>{data}</li>
})}
</ul>
</div>
<div className="TagItForUpload">
<form>
<input onChange={this.handleTagSuggestion} type="text" placeholder="Tag it" />
<input type="submit" defaultValue="Post " />
</form>
<div className="suggestionSystemForTagging">
<ul>
{this.renderSuggestion()}
</ul>
</div>
</div>
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
photos:state.photoUpload,
loadedTags:state.loadedAjax
}
};
const mapDispatchToProps = (dispatch) => {
return{
setCaptionText:(id,data) => dispatch(uploadActions.setCaptiontopics(id,data)),
searchTag:data => dispatch(uploadActions.loadSuggestionTags(data)),
setPostTags:data => dispatch(uploadActions.setTagsToPost(data))
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Upload)
的console.log(this.props.setPostTags),
function setPostTags(data){ return dispatch(uploadActions.setTagsToPost(data)); }