如何在单击按钮时做出反应以更改变量值

debugcn 发表于 Dev

拉胡尔

当有人单击“添加更多”按钮时，我希望pickers变量更改（包含的两个实例mainPart。

在页面加载，只有一个mainPart内pickers。但是，当有人单击“添加更多”时，我想更改它。

我有一个这样的反应代码：

export default class TestComponent extends React.Component {
    constructor(props) {
        // Stuff here
    }
  
    mainPart(a,b,c) {
        return (
            // Stuff here
        )
    }
    
    changeMyVariable(a,b,c,type) {
        if (type==1) {
            return [
                ( 
                    <span>
                        mainPart(a,b,c)
                    </span>
                )
            ]
        }
        if (type==2) {
            return [
                ( 
                    <span>
                        mainPart(a,b,c)
                    </span>
                ),
                ( 
                    <span>
                        mainPart(a,b,c)
                    </span>
                )
            ]
        }
    }
    
    render() {
        let pickers = this.changeMyVariable(a, b, c,1);
        
        return (
            {pickers}
            <button onClick={this.changeMyVariable(a, b, c,2)} type="button">Add more</button>
        );
        
    }
}

威克尔

首先，您需要使用状态来使您的组件在类型更改时呈现

constructor(props){
    super(props)
   this.state = {
     type: 1
  }
}

render(){
    let pickers  =  this.changeMyVariable(a, b,  c,  this.state.type);
   return (<>{pickers}
<button onClick={() => this.setState({type: 2})} /></>
);
}

其次，您之前没有很好地处理按钮单击事件。如果未单击按钮，则渲染后将立即运行您的函数。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。