Событие onChange не передает параметры моей функции - PullRequest
Новая
       13

Событие onChange не передает параметры моей функции

0 голосов
/ 03 октября 2019

Итак, в основном у меня есть событие onChange, которое я использую для смены изображений. Я пытаюсь сделать это в .map, так как есть несколько изображений, и поэтому у меня есть «счетчик» под названием «i», который отслеживает, какое изображение я пытаюсь изменить. Проблема, с которой я сталкиваюсь, заключается в том, что, когда я пытаюсь передать «i» в качестве одного из параметров в событии onChange, «i» всегда равно 0 независимо от того, какое изображение я пытаюсь изменить.

Это сайт, предназначенный для социальных сетей, где люди могут изменять свои профильные изображения. Я пытался объявить новую переменную и установить ее равной «i» непосредственно перед событием onChange, но это тоже не работает 

let data = this.state.results.map((item, i) => {
    return (
        <tr key={i}>
            <td>
                <Profile id="profile" className="d-flex justify-content-center">
                    {
                        this.state.accounts[i].profilePicture ?
                        <>
                            <RoundedProfile size="50px" id="roundedProfile" className="profilePicture" shadowed src={ settings.apiUrl + this.state.accounts[i].profilePicture }
                             />
                             <div id="changeProfilePicture" onClick={this.changeProfilePicture}>
                                 <FontAwesomeIcon icon={faPen}/>
                             </div>
                             <input
                             type="file"
                             id="inputProfilePicture"
                             accept="image/png, image/jpeg"
                             value={this.state.profilePicture ? this.state.profilePicture : ""}
                             onChange={(event) => this.handleChangeProfile(event, i)}
                             />
                         </>
                         :
                         <>
                         <div id="changeProfilePicture" onClick={this.changeProfilePicture}>
                             <FontAwesomeIcon icon={faPen}/>
                         </div>
                         <input
                         type="file"
                         id="inputProfilePicture"
                         accept="image/png, image/jpeg"
                         value={this.state.profilePicture ? this.state.profilePicture : ""}
                         onChange={(event) => this.handleChangeProfile(event, i)}
                         />
                     </>
                     }
                 </Profile>
             </td>

Так что я ожидаю, что «i» будет равнос изображением профиля, которое ассоциируется с

Ответы [ 2 ]

0 голосов
/ 03 октября 2019

Вы можете получить значение 'event', использовать свойство currentTarget.value и назначить onChange следующим образом: 

class test extends React.Component{
    state = {trKey: 0}

    handleChangeProfile = (id)=>{
     /**your instructions**/
     this.setState({trKey: i.currentTarget.value })
    }

    render(){
    return(
           /****/
           onChange = {this.handleChangeProfile}
    )

}}

0 голосов
/ 03 октября 2019

Вы должны отправить i с первым параметром: ваш код: onChange={(event) => this.handleChangeProfile(event, i)} и изменить на onChange={(event) => this.handleChangeProfile(i,event)} для более подробной информации https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

...