React Native: как вызвать дочерние ссылки из родительской функции события?
Имеет родительский тег как <TouchableWithoutFeedback> и дочерний как <Image>, пытаясь изменить источник изображения из родительской функции onPress, но получаю ошибку. как я могу заархивировать это с помощью ссылок? или каким-либо другим способом решить эту проблему?
Версия для React-native: 0.56
Ошибка :
Cannot read property 'favIcon' of undefined
Образец кода :
const fav = require('../../images/favorite.png');
const nonfav = require('../../images/not_favorite.png');
updateFavorite = (id) => {
this.props.refs.favIcon.source(fav);
}
render(){
return (
<View style = {styles.container}>
<TouchableWithoutFeedback onPress = { this.updateFavorite.bind(this, 1) }>
<View style = { styles.imageView }>
<Image refs = "favIcon" source = { nonfav } />
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress = { this.updateFavorite.bind(this, 2) }>
<View style = { styles.imageView }>
<Image refs = "favIcon" source = { nonfav } />
</View>
</TouchableWithoutFeedback>
</View>
)
}
Примечание: изменить только дочернее изображение onPressed, а не все изображения.
@AshwinMothilal, изменил refs на ref во всех местах this.props.ref.favIcon.source(fav); , получая ту же ошибку, что и выше.
@AshwinMothilal - как использовать ref как функцию?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
попробуйте использовать nativeProps, например
import resolveAssetSource from 'resolveAssetSource';
this.refs['favIcon'].setNativeProps({
src: [resolveAssetSource(fav)]
});
обратитесь к это для получения дополнительной информации.
Он может не работать с исходными версиями 0.50+, но, согласно комментарию это, он должен работать с 0.57.1
получение ошибки Cannot read property 'setNativeProps' of undefined.
проверять с android или ios?
проверка в android
Я использую 0,56, нужно какое-либо альтернативное решение.
Обновление свойств элементов в React лучше всего производить с помощью метода setState. Попробуйте следующее
updateFavorite = (event) => {
event.target.setAttribute('src', fav)
}
render(){
return (
<View style = {styles.container}>
<TouchableWithoutFeedback>
<View style = { styles.imageView }>
<img ref = {ref => this.favIcon = ref} src = {nonFav} onPress = { this.updateFavorite }/>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback>
<View style = { styles.imageView }>
<img ref = {ref => this.favIcon = ref} src = {nonFav} onPress = { this.updateFavorite } />
</View>
</TouchableWithoutFeedback>
</View>
)
}
получение ошибки - Cannot read property 'favIcon' of undefined
Я думаю, это может вызвать какие-то проблемы с функцией? Я правильно звоню?
@ 151291 Обновил мой ответ
Если у нас есть несколько изображений, все правильно? Мне нужно подать заявку только на одно, означает дочерний элемент <TouchableWithoutFeedback>, у меня их много.
@ 151291 Вы можете оставить другой <Image /> без изменений, используя жестко заданный атрибут source. Просто измените атрибут source того, который вы хотите обновить, чтобы взять из this.state.source.
Я не получил вышеуказанного!
если мы сделаем this.setState({source: this.fav});, он будет применяться ко всем изображениям, верно?
@ 151291 Кажется, теперь я понимаю, чего вы хотите. Вы хотите изменить изображение только на определенный> img />. Попробуйте перейти от Press к элементу img (и используйте img вместо Image). Обновил мой ответ
<img> будет поддерживать в react-native v0.56 ?, он выдает ошибку!
Несколько вопросов - что такое реф? Я видел только реф. Если ссылки - это вещь, то почему вы используете их как «this.props.refs и т. д.». Вы пробовали ref как функцию?