当它在地图里面的函数React / redux时我的动作没有触发?

时间:2016-12-07 06:11:27

标签: javascript reactjs redux

我很反应/ 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));               }

0 个答案:

没有答案