Question

我是React js.的新手。我有点困惑的是，当map中的所有数据都运行时，如何获取id和onChange evt值。是的，那里已经有答案，但没有任何对我有用。任何方法或者帮助将不胜感激。提前谢谢。

import React from 'react'
import {connect} from 'react-redux'

class Upload extends React.Component{

    constructor(props){
        super(props);
        this.handleChangeSinglePost = this.handleChangeSinglePost.bind(this)
        this.handleID = this.handleID.bind(this)
    }
    handleChangeSinglePost(data){
        console.log(data)//Get the input//Not working

    }
    handleID(e){

        console.log(e.target.value)get the Id
    }
    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 onChange={this.handleID}>
                                <input onChange={this.handleChangeSinglePost(data.id)}  name="caption" type="text" placeholder="Caption This" />
                            </form>
                        </div>
                    </div>
                )
            })
        )
    }
    render(){
        // console.log(this.props.photos)
        return(
            <div className="UploaContainer">
                <div className="UploadContainerContents">

                    {this.renderMaptheSingleUpload()}

                    <div className="tagsForupload">
                        <ul>
                            <li>OrdinaryLife</li>
                            <li>OrdinaryLife</li>
                            <li>OrdinaryLife</li>
                            <li>OrdinaryLife</li>
                            <li>OrdinaryLife</li>
                        </ul>
                    </div>
                    <div className="TagItForUpload">
                        <form>
                            <input type="text" placeholder="Tag it" />
                            <input type="submit" defaultValue="Post " />
                        </form>
                        <div className="suggestionSystemForTagging">
                            <ul>
                                <li>Drake</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                                <li>LetMeChoose</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        photos:state.photoUpload
    }
};

export default connect(mapStateToProps)(Upload)

Answer 1

我认为你可以在onChange事件中使用函数：

<input onChange={e=>this.handleChangeSinglePost(e.target.value, data.id)} " />

 handleChangeSinglePost(value, id){
     console.log("value>>>",value);
     console.log("id>>>",id);
 }

Answer 2

您需要将绑定handleChangeSinglePost()用于

等数据

<input onChange={this.handleChangeSinglePost.bind(this,data.id)}  name="caption" type="text" placeholder="Caption This" />

Answer 3

问题已得到解答，但你也可以使用bind来解决。

<input onChange={this.handleChangeSinglePost.bind(this, data.id)} type="text"/>

然后handleChangeSinglePost应如下所示：

handleChangeSinglePost(id, event){
   ......
}

这是fiddle。

Answer 4

如何使用Closures

 handleChangeSinglePost = (id) => (e) => {
    console.log("value>>>",e.target.value);
    console.log("id>>>",id);
 }

 <input onChange={this.handleChangeSinglePost(data.id)} " />

如果您不想使用实验语法

 handleChangeSinglePost(id) {
  return (e) => {
     console.log("value>>>",e.target.value);
     console.log("id>>>",id);
   }
 }

如何在onChange事件发生时获取id和输入数据React js？

4 个答案: