События React, onChange и onClick срабатывают одновременно

У меня проблема с моим приложением: когда пользователь набирает (и, я полагаю, onChange запускается), даже одну букву, событие onClick ниже запускается. В чем моя ошибка? Я упростил код (там, где вы видите комментарии), там нет соответствующего кода! Спасибо всем!

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

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

    handleChangeEvent(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.handleChangeEvent} />
                            </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)}

Muneeb 09.04.2018 13:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
2 628
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

То, что вы сделали, в основном использовало возвращаемые данные вашей функции createSection для вашего onClick.

Итак, на вашем onClick попробуйте

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

Деталь onChange уже правильная.

Эта проблема аналогична существующему ответу на вопрос: Функция React onClick срабатывает при рендеринге

Спасибо за Ваш ответ! Я принял другой ответ, потому что он был первым, но и ваш тоже помог!

Michele Mirandola 09.04.2018 15:07

Я думал, что мой ответ был первым, хотя позже отредактировал его, чтобы дать больше разъяснений. Но неважно, я рад, что это помогло!

ionizer 09.04.2018 15:09
Ответ принят как подходящий

в вашей кнопке вы инициализируете функцию this.createSection(project_data.uid) вместо того, чтобы вызывать ее при необходимости. Самый простой способ - вызвать через стрелочную функцию onClick = {() => this.createSection(project_data.uid)}

Другие вопросы по теме