Javascript 以编程方式触发压力机

我有以下组件

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

类语言屏幕扩展组件{
_按按钮（）{
}
render（）{
var enButton=
变量arButton=
返回(
{enButton}
{arButton}
);
}
}

当用户按下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>
        );
    }
}

class RoundButton扩展组件{
建造师（道具）{
超级（道具）；
this.state={isSelected:true==props.selected}；
}
onClickListen=（）=>{
这是我的国家({
isSelected:！this.state.isSelected
});
这个.forceUpdate（）；
}
render（）{
如果（本州已当选）{
返回此.goldenGradient（此.props）；
}否则{
返回此.blackordered（此.props）
}   
}
黄金海岸（道具）{
返回(
{props.text}
);
}
黑名单（道具）{
返回(
{props.text}
);
}
}

---

我所寻找的解决方案是，如果用户单击EN按钮，那么我希望其他按钮也触发按下，这将导致状态更改并切换突出显示状态。似乎没有解决办法。如何实现这一点？

最好的解决方案是让父组件管理突出显示的按钮。因此，您必须将当前选定按钮置于父组件的状态，并将布尔属性传递给该按钮，以指示是否选中该按钮。正如我所见，您已经传递了一个“选定”道具，该道具应该在父组件中处理，而不是在按钮的组件中处理

如果您按照您所说的那样做，您将中断react所基于的自上而下的数据流

更新 父组件 添加构造函数：

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}

按钮组件 这是不言自明的

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

class RoundButton扩展组件{
建造师（道具）{
超级（道具）；
this.state={isSelected:true==props.selected}；
}
onClickListen=（）=>{
this.props.onPress（this.props.locale）；
/*
*您不需要这个，组件已经在setState（）上更新
*召唤
*/
//这个.forceUpdate（）；
}
render（）{
如果（本州已当选）{
返回此.goldenGradient（此.props）；
}否则{
返回此.blackordered（此.props）
}   
}
黄金海岸（道具）{
返回(
{props.text}
);
}
黑名单（道具）{
返回(
{props.text}
);
}
}

您是否考虑过更改呈现按钮的父组件中的状态？为什么不跟踪在

语言屏幕中按下的按钮，然后将此信息传递给按钮

    _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
    />

很抱歉，我刚开始使用react，你能帮助我处理代码吗？我收到了错误，this.setState不是函数，不知道为什么。你必须将“this”绑定到构造函数中的函数。再次更新或您可以在线绑定：在您的按钮init->
onPress={this.\u onPressButton.bind（this）}
中，因为您必须初始化您选择的按钮。再次更新，请检查构造函数部分
    _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
    />

onClickListen = () => {
    this.props.onPress(this.props.locale)
}

render() {
    if (this.props.isSelected) {
        return this.goldenGradient(this.props);
    } else {
        return this.blackBordered(this.props)
    }   
}