Использование реквизита и других атрибутов с определением компонента реакции - PullRequest
Новая
       25

Использование реквизита и других атрибутов с определением компонента реакции

0 голосов
/ 07 января 2020

Я создал компонент реагирования, и я повторно использую его в других компонентах. 

<SC_Button label = "English" btnStyle = "sc-btn-default--sinhala mb-2" onClick={this.handleClick}/>

Но функция, определенная в onClick, не выполняется, потому что она с пропами, переданными компоненту. Я думаю, что реагирует читает на Click также в качестве опоры. Я новичок, чтобы реагировать.

Ниже работает. Но я не хочу оборачивать свой реактивный компонент дополнительным div из-за проблемы с стилем. 

<div onClick={this.handleClick} >
    <SC_Button label = "English" btnStyle = "sc-btn-default--sinhala mb-2"/>
</div>

Есть ли способ использовать реквизиты вместе с другими атрибутами в определениях реактивного компонента?

Редактировать:

Родительский компонент 

import React from 'react';
import { withRouter } from "react-router-dom";

import SC_Button from '../components/button';

class Home extends React.Component {

    handleClick = () => {
        this.props.history.push('/page2');
    }

    render() {

        return (
            <div className="container-fluid">
                <div className="row sc-overlay sc-overlay-main">
                    <div className="col-md-12 col-xl-5 offset-xl-1">
                        <span className = "sc-overlay-main__left">
                            <span className = "sc-main-image">
                                <img src={require('../assets/dialog_logo.png')} />
                            </span>
                            <h1 className="mt-4">Welcome to MyDialog</h1>
                        </span>
                    </div>
                    <div className="col-md-12 col-xl-5">
                        <div className="row sc-overlay-main__right">
                            <label>Choose your preferred language</label>
                            <SC_Button label = "සිංහල" btnStyle = "sc-btn-default--sinhala mb-2" onClick={this.handleClick}/>
                            <SC_Button label = "தமிழ்" btnStyle = "sc-btn-default--tamil mb-2" />
                            <SC_Button label = "English" btnStyle = "sc-btn-default--english mb-2" />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Home);

SC_Button Component 

import React from 'react';
import { withRouter } from "react-router-dom";

class SC_Button extends React.Component{

    constructor(props) {
        super(props);
    }

    render() {

        return (
            <button type="button" className={`sc-btn-default ${ this.props.btnStyle }`}>{this.props.label}</button>
        );
    }
}

export default withRouter(SC_Button);

1 Ответ

2 голосов
/ 07 января 2020

Ваш <SC_Button /> компонент или любой пользовательский компонент, который вы создаете, не реализует автоматически обработчик событий. По сути, вы просто даете ему еще одну опору, называемую onClick, которую он просто выбрасывает. Вы должны использовать обратный вызов, который вы передаете, в возвращаемых им элементах DOM:

SC_Button. js

import React from 'react';
import { withRouter } from "react-router-dom";

class SC_Button extends React.Component{
    constructor(props) {
        super(props);
    }


    render() {

        return (
            <button 
                type="button"
                className={`sc-btn-default ${ this.props.btnStyle }`} 
                onClick={this.props.handleClick}
            >
                {this.props.label}
            </button>
        );
    }
}

export default withRouter(SC_Button);

Нет необходимости определять handleClick функция в компоненте, так как вы будете передавать ее как опору каждый раз, когда создаете ее экземпляр. Это позволяет различным экземплярам вести себя по-разному.

...