React、onChange 和 onClick 事件同时触发答案

【问题标题】：React, onChange and onClick events fires simultaneouslyReact、onChange 和 onClick 事件同时触发
【发布时间】：2018-04-09 11:10:00
【问题描述】：

我的应用程序有一个问题：当用户输入时（我想 onChange 被触发），即使是一个字母，下面的 onClick 事件也会被触发。我的错误在哪里？我已经简化了那里的代码（你看到 cmets 的地方），那里没有相关的代码！谢谢大家！

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

【问题讨论】：

而不是直接调用它，而是将其包装在另一个函数中，例如 onClick={() => this.createSection(project_data.uid)}

标签： reactjs onclick onchange

【解决方案1】：

在您的 Button 中，您正在初始化函数 this.createSection(project_data.uid)，而不是在需要时调用它。最简单的方法是通过箭头函数调用 onClick={() => this.createSection(project_data.uid)}

【讨论】：

【解决方案2】：

您所做的基本上是使用您的createSection 函数的返回数据为您的onClick

所以，在你的onClick 上试试

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

onChange 部分已经正确。

此问题类似于现有的已回答问题：React onClick function fires on render

【讨论】：

感谢您的回答！我接受了另一个答案，因为它是第一个，但你的答案也很有帮助！
我认为我的答案是第一个，但后来对其进行了编辑以提供更多说明。但没关系，我很高兴它有帮助！