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

Question

I'm new to Reactjs and have more experience with regular html/js but need to use Reactjs for a project I am working on.

I want to allow users to click on a button if they want to add another setting. I need help in implementing a button that when clicked, extends the existing div and displays 2 more options to users (Metric and Threshold input boxes). ie if the button is clicked 3 times, there will be 6 input boxes appearing on the page.

Currently once the button is clicked, the function call is working as addItem() is getting triggered. However, I'm not sure how to implement code to display more options to users.

My code so far:

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

This is a snapshot of the webpage, if a user clicks on 'Add Metric' then the page should be extended and another input box of Metric and Threshold Score should appear.

Answer 1

You are direct call the function in the onClick event. that's why it's didn't work. You can two ways to call the function in the event. For example. onClick={this.addItem} or onClick={()=>this.addItem()}

Answer 2

You can trigger an event in 2 ways. You need to call a direct function on the onclick event. first onClick={this.addItem} and seconf one is 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>
                )
        }
}