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

【问题标题】：How to get id and input data when onChange event is happening React js?当 onChange 事件发生 React js 时如何获取 id 和输入数据？
【发布时间】：2016-12-06 06:57:08
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs redux onchange

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您需要使用绑定handleChangeSinglePost() 到数据，如

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

【讨论】：

那handleChangeSinglePost函数应该怎么写

【解决方案3】：

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

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

然后handleChangeSinglePost 应该如下所示：

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

这是fiddle。

【讨论】：

【解决方案4】：

如何使用闭包

 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);
   }
 }

【讨论】：

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