Нажатие на триггер программно

У меня есть следующий компонент

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, тогда я хочу, чтобы другая кнопка также запускала нажатие, это приведет к изменению состояния и переключению состояния выделения. Похоже, что решение не работает. Как мне это сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 163
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Лучшее решение для этого - позволить родительскому компоненту управлять подсветкой кнопок. Таким образом, вы должны поместить в состояние родительского компонента текущую выбранную кнопку и передать логическое свойство кнопке, которое указывает, выбрана она или нет. Как я вижу, вы уже передали «выбранную» опору, эта опора должна обрабатываться в родительском компоненте, а не в компоненте кнопки.

Если вы сделаете то, что сказали, вы прервете нисходящий поток данных, реакция которого основана на

Обновлено

Отцовский компонент

Добавить конструктор:

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

Извините, я только начал реагировать, вы можете мне помочь с кодом?

Ibrahim Azhar Armar 31.10.2018 10:06

Я получаю сообщение об ошибке, this.setState не является функцией, не знаю почему.

Ibrahim Azhar Armar 31.10.2018 10:52

Вы должны привязать this к функции в конструкторе. Обновлен снова

Andriy Klitsuk 31.10.2018 10:54

или вы можете привязать его в строке: в вашей кнопке init -> onPress = {this._onPressButton.bind(this)}

Andriy Klitsuk 31.10.2018 10:56

Потому что вам нужно запустить selectedButton. Обновился снова, проверьте конструкторскую часть

Andriy Klitsuk 31.10.2018 11:07

Теперь он не показывает ошибки, однако установлено только начальное состояние, когда я нажимаю на другую кнопку, оно не выделяется.

Ibrahim Azhar Armar 31.10.2018 11:12

Странный. Проверьте, вызывается ли функция onPress из console.infoging или отладчика

Andriy Klitsuk 31.10.2018 11:15

Я выполнил отладку для _onPressButton(button), когда я нажимаю на EN, он показывает значение en, но когда я нажимаю на другую кнопку, он показывает [object Object], значение, которое должно отображаться, это ar

Ibrahim Azhar Armar 31.10.2018 11:16

Довольно странно. В arButton локаль locale = {'ar'}, поэтому я действительно не знаю, почему вы получаете рекламный объект ... Может быть, двойные скобки?

Andriy Klitsuk 31.10.2018 11:23

В RoundButton.js я использовал onPress и onPressOut. Я удалил onPressOut и просто сохранил onPress, теперь он, кажется, дает правильное значение, но подсветка по-прежнему не работает.

Ibrahim Azhar Armar 31.10.2018 11:26

что вы получаете сейчас от _onPressButton(button)?

Andriy Klitsuk 31.10.2018 11:30

Я получаю значения en и ar на основе выбранной кнопки, это кажется правильным.

Ibrahim Azhar Armar 31.10.2018 11:32

Позвольте нам продолжить обсуждение в чате.

Ibrahim Azhar Armar 31.10.2018 11:32

Задумывались ли вы об изменении статуса в родительском компоненте, в котором отображаются кнопки? Почему бы вам не отследить, какая кнопка была нажата в 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)
    }   
}

Другие вопросы по теме