如何在 Reactjs 中通過 onClick 擴展 div 元素

Question

我是 Reactjs 的新手，對常規 html/js 有更多經驗，但需要在我正在處理的項目中使用 Reactjs。

如果他們想添加另一個設置，我想允許用戶單擊一個按鈕。 我需要幫助來實現一個按鈕，當單擊該按鈕時，它會擴展現有的 div 並向用戶顯示另外 2 個選項（度量和閾值輸入框）。 即如果按鈕被點擊3次，頁面上會出現6個輸入框。

目前，一旦單擊按鈕，function 調用就會在觸發 addItem() 時工作。 但是，我不確定如何實現代碼以向用戶顯示更多選項。

到目前為止我的代碼：

addItem() {
     
};

...

return (
...
<Form.Item name="frequency" label="Metric">
</Form.Item>
<Form.Item name="amount" label="Threshold Score">
   <Slider marks={marks} />
   <button onClick={this.addItem()} {...formItemLayout} labelAlign="right" type="submit" className="btn 
    btn-success px-5" >
       Add Metric
   </button>    
</Form.Item>
)

這是網頁的快照，如果用戶單擊“添加指標”，則應擴展頁面並出現另一個指標和閾值分數輸入框。

Answer 1

您可以在 onClick 事件中直接調用 function。 這就是為什么它不起作用。 您可以通過兩種方式在事件中調用 function。 例如。 onClick={this.addItem}或onClick={()=>this.addItem()}

Answer 2

您可以通過 2 種方式觸發事件。 您需要在 onclick 事件上直接調用 function。 第一個onClick={this.addItem}和 seconf 一個是onClick={(event) => this.addItem(event)} 。

class Demo extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
        
    addItem() {
        console.log('trigger);
    };
    
    render() {
            return (
                <Form.Item name="frequency" label="Metric">
                </Form.Item>
                <Form.Item name="amount" label="Threshold Score">
                     <Slider marks={marks} />
                     <button onClick={this.addItem} {...formItemLayout} labelAlign="right" type="submit" className="btn 
                        btn-success px-5" >
                             Add Metric
                     </button>    
                </Form.Item>
                )
        }
}