Как получить идентификатор и входные данные при событии onChange React js?

Question

Я новичок в React js.I немного немного смущен, что как получить 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); 
    } 
}