React, onChange and onClick events fires simultaneously

Question

I have a problem on my application: when a user is typing in the (and onChange is fired I suppose), even one single letter, the onClick event below is fired. Where is my mistake? I have simplified the code over and there (where you see the comments), there no relevant code in there! Thanks to everyone!

class Project extends React.Component {
    constructor() {
        super();
        this.state = {
            section_title: '',
            sections: []
        }

        this.handleChange = this.handleChange.bind(this);
        this.createSection = this.createSection.bind(this);
        this.getSections = this.getSections.bind(this);
    }

    handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    createSection(project_id) {
        if(this.state.section_title != '') {
            //Do Something here
        }
    }

    getSections(project_id) {
        //Fetch data here
    }

    componentDidMount() {
        let project_data = this.props.project[0];

        this.getSections(project_data.uid);
    }

    render() {
        let project_data = this.props.project[0];

        return (
            <div>
                <h2 className="ui header">
                    <i className="folder outline icon"></i>
                    <div className="content">
                        {project_data.title}
                        <div className="sub header">{he.decode(project_data.description)}</div>
                    </div>
                </h2>
                <div className="ui divider"></div>

                <Modal trigger={<Button color="teal">Add New Section</Button>} closeIcon>
                    <Modal.Header>Add new section</Modal.Header>
                    <Modal.Content image>
                        <Modal.Description>
                        <Form>
                            <Form.Field>
                                <label>Section Name</label>
                                <input name="section_title" placeholder='Es: Slider ecc...' value={this.state.section_title} onChange={this.handleChange} />
                            </Form.Field>
                            <Button color="green" type='submit' onClick={this.createSection(project_data.uid)}>Crea Sezione</Button>
                        </Form>
                        </Modal.Description>
                    </Modal.Content>
                </Modal>
            </div>
        );
    }
}

Instead of calling it directly wrap it in another function like onClick={() => this.createSection(project_data.uid)} — Muneeb, Apr 09 '18 at 11:16

score 3 · Accepted Answer · answered Apr 09 '18 at 11:15

3

in your Button you are initializing function this.createSection(project_data.uid) instead of calling it when needed. Easiest way is to call via arrow function onClick={() => this.createSection(project_data.uid)}

answered Apr 09 '18 at 11:15

ivica.moke

1,054
2
10
19

ionizer · Answer 2 · 2018-04-09T11:18:19.973

0

What you did is basically using the return data of your createSection function for your onClick

So, on your onClick, try

onClick={() => this.createSection(project_data.uid)}

The onChange part is already correct.

This problem is similar to an existing answered question: React onClick function fires on render

edited Apr 09 '18 at 11:18

answered Apr 09 '18 at 11:11

ionizer

1,661
9
22

Thanks for your answer! I've accepted the other answer because it was the first, but yours was helpful too! – Michele Mirandola Apr 09 '18 at 13:07
I thought my answer was first, though edited it later to provide more clarification. But nevermind that, I'm glad it helped! – ionizer Apr 09 '18 at 13:09

React, onChange and onClick events fires simultaneously

2 Answers2