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

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