javascript - 如何更改按钮单击 react 中的变量值

Question

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

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

我有一个像这样的 react 代码:

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

Answer 1

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

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

其次您之前没有很好地处理按钮单击事件。您的函数将在渲染后立即运行，而不是在单击按钮时运行。