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

Question

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

1

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

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

Спасибо.

Ibrahim Azhar Armar 31 окт. 2018, в 10:34

Источник

Теги:

javascript

react-native

2 ответа

1

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

parohy 31 окт. 2018, в 06:18

0

Ахха, я понимаю вашу точку зрения, позвольте мне попробовать это. благодарю вас.
Ibrahim Azhar Armar 31 окт. 2018, в 09:15

Ещё вопросы

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

Andriy Klitsuk · Accepted Answer · 2018-10-31T06-58-00.000Z

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

Если вы поступите так, как вы сказали, вы прервите поток данных сверху вниз, на основании которого

ОБНОВИТЬ

Компонент отца

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

constructor(props) {
  super(props);

  this.state = {
    selectedButton: 'en'
  };

  this._onPressButton = this._onPressButton.bind(this); 
}

На кнопке нажмите:

_onPressButton(button) {
  this.setState({
    selectedButton: button
  });
}

Кнопки init:

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)}
Потому что вы должны инициировать выбранную кнопку. Обновлен снова, проверьте конструктор
Теперь это не показывает ошибки, однако только начальное состояние установлено, когда я нажимаю на другую кнопку, это не подсвечивает.
Странный. Проверьте, вызывается ли функция onPress или нет с помощью console.logging или отладчика
Я сделал отладку для _onPressButton(button) когда я нажимаю на EN он показывает значение en но когда я нажимаю на другую кнопку, он показывает [object Object] значение, которое должно быть показано, является ar
Я проверил и onPress вызывается правильно.
Довольно странно В arButton locale locale={'ar'} , так что я действительно не знаю, почему вы получаете рекламный объект .. Может быть, двойные скобки?
В RoundButton.js я использовал onPress и onPressOut Я удалил onPressOut и просто оставил onPress теперь он, кажется, дает правильное значение, но выделение все равно не работает.
что вы получаете сейчас от _onPressButton(button) ?
Я получаю значения en и ar на основе выбранной кнопки, это кажется правильным.
Давайте продолжим эту дискуссию в чате .