У меня есть следующий компонент
class LanguageScreen extends Component {
_onPressButton() {
}
render() {
var enButton = <RoundButton
buttonStyle = {'black-bordered'}
text = {'EN'}
locale = {'en'}
selected = {true}
style = {styles.roundButtonStyle}
onPress = {this._onPressButton}
/>
var arButton = <RoundButton
buttonStyle = {'golden-gradient'}
text = {'ع'}
locale = {'ar'}
selected = {false}
style = {styles.roundButtonStyle}
onPress = {this._onPressButton}
/>
return(
<View style = {styles.rootViewStyle}>
<View style = {styles.buttonContainerRootViewStyle}>
<View style = {styles.buttonContainerViewStyle}>
{enButton}
{arButton}
</View>
</View>
<View style = {styles.submitButtonContainerViewStyle}>
<Button style = {styles.submitButtonStyle}/>
</View>
</View>
);
}
}
Когда пользователь нажимает на enButton, я хочу изменить стиль arButton и наоборот, чтобы дать вам изображение, PFA под снимком экрана.
По сути, я хочу выделять по одной кнопке за раз, допустим, пользователь нажимает EN, я хочу выделить выбранный элемент и убрать выделение с другого.
Это мой класс компонента RoundButton
class RoundButton extends Component {
constructor(props) {
super(props);
this.state = { isSelected: true === props.selected };
}
onClickListen = () => {
this.setState({
isSelected: !this.state.isSelected
});
this.forceUpdate();
}
render() {
if (this.state.isSelected) {
return this.goldenGradient(this.props);
} else {
return this.blackBordered(this.props)
}
}
goldenGradient(props) {
return(
<TouchableOpacity
style = {styles.buttonStyle}
onPress = {this.props.onPress}
onPressOut = {this.onClickListen}
>
<LinearGradient
colors = {['#E9E2B0', '#977743']}
start = {{x: 1.0, y: 0.0}}
end = {{x: 0.0, y: 1.0}}
style = {styles.linearGradient}
>
<Text style = {this.props.locale == 'ar' ? styles.goldenGradientTextStyleAr : styles.goldenGradientTextStyle}>
{props.text}
</Text>
</LinearGradient>
</TouchableOpacity>
);
}
blackBordered(props) {
return(
<TouchableOpacity
style = {
styles.buttonStyle,
styles.blackBorderedStyle
}
onPress = {this.props.onPress}
onPressOut = {this.onClickListen}
>
<Text style = {this.props.locale == 'ar' ? styles.blackBorderedTextStyleAr : styles.blackBorderedTextStyle}>
{props.text}
</Text>
</TouchableOpacity>
);
}
}
Решение, которое я искал, заключалось в следующем: если пользователь нажимает кнопку EN, тогда я хочу, чтобы другая кнопка также запускала нажатие, это приведет к изменению состояния и переключению состояния выделения. Похоже, что решение не работает. Как мне это сделать?
Лучшее решение для этого - позволить родительскому компоненту управлять подсветкой кнопок. Таким образом, вы должны поместить в состояние родительского компонента текущую выбранную кнопку и передать логическое свойство кнопке, которое указывает, выбрана она или нет. Как я вижу, вы уже передали «выбранную» опору, эта опора должна обрабатываться в родительском компоненте, а не в компоненте кнопки.
Если вы сделаете то, что сказали, вы прервете нисходящий поток данных, реакция которого основана на
Добавить конструктор:
constructor(props) {
super(props);
this.state = {
selectedButton: 'en'
};
this._onPressButton = this._onPressButton.bind(this);
}
При нажатии кнопки:
_onPressButton(button) {
this.setState({
selectedButton: button
});
}
Кнопки инициализации:
const arButton = <RoundButton
buttonStyle = {'golden-gradient'}
text = {'ع'}
locale = {'ar'}
selected = {this.checkButtonSelect('ar')}
style = {styles.roundButtonStyle}
onPress = {this._onPressButton}/>
const enButton = <RoundButton
buttonStyle = {'black-bordered'}
text = {'EN'}
locale = {'en'}
selected = {this.checkButtonSelect('en')}
style = {styles.roundButtonStyle}
onPress = {this._onPressButton}
Проверьте, выбрана ли кнопка
checkButtonSelect(button) {
return this.state.selectedButton === button;
}
Это довольно понятно
class RoundButton extends Component {
constructor(props) {
super(props);
this.state = { isSelected: true === props.selected };
}
onClickListen = () => {
this.props.onPress(this.props.locale);
/*
* You dont need this, the component is already updated on setState()
* call
*/
//this.forceUpdate();
}
render() {
if (this.state.isSelected) {
return this.goldenGradient(this.props);
} else {
return this.blackBordered(this.props)
}
}
goldenGradient(props) {
return(
<TouchableOpacity
style = {styles.buttonStyle}
onPress = {this.onClickListen}
>
<LinearGradient
colors = {['#E9E2B0', '#977743']}
start = {{x: 1.0, y: 0.0}}
end = {{x: 0.0, y: 1.0}}
style = {styles.linearGradient}
>
<Text style = {this.props.locale == 'ar' ? styles.goldenGradientTextStyleAr : styles.goldenGradientTextStyle}>
{props.text}
</Text>
</LinearGradient>
</TouchableOpacity>
);
}
blackBordered(props) {
return(
<TouchableOpacity
style = {
styles.buttonStyle,
styles.blackBorderedStyle
}
onPress = {this.props.onPress}
onPressOut = {this.onClickListen}
>
<Text style = {this.props.locale == 'ar' ? styles.blackBorderedTextStyleAr : styles.blackBorderedTextStyle}>
{props.text}
</Text>
</TouchableOpacity>
);
}
}
Я получаю сообщение об ошибке, this.setState не является функцией, не знаю почему.
Вы должны привязать this к функции в конструкторе. Обновлен снова
или вы можете привязать его в строке: в вашей кнопке init -> onPress = {this._onPressButton.bind(this)}
Потому что вам нужно запустить selectedButton. Обновился снова, проверьте конструкторскую часть
Теперь он не показывает ошибки, однако установлено только начальное состояние, когда я нажимаю на другую кнопку, оно не выделяется.
Странный. Проверьте, вызывается ли функция onPress из console.infoging или отладчика
Я выполнил отладку для _onPressButton(button)
, когда я нажимаю на EN
, он показывает значение en
, но когда я нажимаю на другую кнопку, он показывает [object Object]
, значение, которое должно отображаться, это ar
Довольно странно. В arButton локаль locale = {'ar'}
, поэтому я действительно не знаю, почему вы получаете рекламный объект ... Может быть, двойные скобки?
В RoundButton.js я использовал onPress
и onPressOut
. Я удалил onPressOut
и просто сохранил onPress
, теперь он, кажется, дает правильное значение, но подсветка по-прежнему не работает.
что вы получаете сейчас от _onPressButton(button)
?
Я получаю значения en
и ar
на основе выбранной кнопки, это кажется правильным.
Позвольте нам продолжить обсуждение в чате.
Задумывались ли вы об изменении статуса в родительском компоненте, в котором отображаются кнопки? Почему бы вам не отследить, какая кнопка была нажата в LanguageScreen
, а затем передать эту информацию кнопкам.
_onPressButton (selectedLocale) {
this.setState({ selectedLocale })
}
var enButton = <RoundButton
onPress = {this._onPressButton}
isSelected = {this.state.selectedLocale === 'en'}
...youStaff
/>
var arButton = <RoundButton
onPress = {this._onPressButton}
isSelected = {this.state.selectedLocale === 'ar'}
...yourStaff
/>
А в вашем RoundButton
:
onClickListen = () => {
this.props.onPress(this.props.locale)
}
render() {
if (this.props.isSelected) {
return this.goldenGradient(this.props);
} else {
return this.blackBordered(this.props)
}
}
Извините, я только начал реагировать, вы можете мне помочь с кодом?