Javascript 当onChange事件发生时，如何获取id和输入数据？

我对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)

从“React”导入React
从“react redux”导入{connect}
类上载扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleChangeSinglePost=this.handleChangeSinglePost.bind（this）
this.handleID=this.handleID.bind（this）
}
handleChangeSinglePost（数据）{
console.log（data）//获取输入//不工作
}
汉德莱德（e）{
log（e.target.value）获取Id
}
RenderMatthesingleUpload（）{
返回(
这个.props.photos.photos.map（（数据）=>{
返回(
)
})
)
}
render（）{
//console.log（this.props.photos）
返回(
{this.renderMatthesingleUpload（）}

普通生活
普通生活
普通生活
普通生活
普通生活


德雷克
LetMeChoose
LetMeChoose
LetMeChoose
LetMeChoose
LetMeChoose
LetMeChoose
LetMeChoose

)
}
}
常量mapStateToProps=（状态）=>{
返回{
照片：state.photoUpload
}
};
导出默认连接（MapStateTops）（上载）

您需要使用bind

handleChangeSinglePost（）

来处理以下数据

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

---

您需要使用bind

handleChangeSinglePost（）

来处理以下数据

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

---

我认为您可以将onChange事件中的函数用作：

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

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

this.handleChangeSinglePost（e.target.value，data.id）}”/>
handleChangeSinglePost（值，id）{
console.log（“值>>>”，值）；
console.log（“id>>>”，id）；
}

我认为您可以将onChange事件中的函数用作：

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

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

this.handleChangeSinglePost（e.target.value，data.id）}”/>
handleChangeSinglePost（值，id）{
console.log（“值>>>”，值）；
console.log（“id>>>”，id）；
}

问题已得到解答，但您也可以使用bind进行解答

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

---

这里有一个问题。

问题已经得到了回答，但您也可以使用bind来解决

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

---

下面是一个例子。

使用闭包怎么样

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

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

---

使用闭包怎么样

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

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

---

然后应如何写入

handleChangeSinglePost

函数然后应如何写入

handleChangeSinglePost

函数如果绑定发生在数组映射内，则该函数将无法正常工作。然后该id将始终是数组中的最后一个data.id。如果绑定发生在数组映射中，则该id将无法按预期工作。那么id将始终是数组中的最后一个data.id