Reactjs中如何通过onClick扩展div元素

Question

我是 Reactjs 新手，对常规 html/js 有更多经验，但我正在从事的项目需要使用 Reactjs。

如果用户想要添加其他设置，我希望允许他们单击按钮。我需要帮助来实现一个按钮，当单击该按钮时，它会扩展现有的 div 并向用户显示另外 2 个选项（度量和阈值输入框）。 即如果按钮被点击3次，页面上会出现6个输入框。

目前，一旦单击按钮，函数调用就会在触发 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 事件中直接调用该函数。这就是为什么它不起作用。您可以通过两种方式调用事件中的函数。例如onClick={this.addItem}或onClick={()=>this.addItem()}

Answer 2

您可以通过 2 种方式触发事件。您需要在 onclick 事件上调用直接函数。第一个 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>
                )
        }
}