Передача функции в onClick.React

122
16 января 2020, 17:00

Почему если я заполняю мэпом, то онклик не работает?Ниже он работает и переходит на следующий шаг

import {MDBBtn, MDBCol, MDBContainer, MDBInput, MDBRow} from "mdbreact"; 
import React from "react"; 
import doctor from '../Staff/img/doctor1.jpg' 
import BranchesComponent from './stepData/branchesComponent' 
import branchesData from './stepData/branchesData' 
 
export default function getStepContent(step, nextStep) { 
    switch (step) { 
        case 0: 
            return ( 
                <MDBContainer> 
                    <MDBRow> 
                        { 
                            branchesData.map((items, index) => 
                                <BranchesComponent data={items} onClick={nextStep} key={index}/> 
                            )} 
                    </MDBRow> 
                </MDBContainer> 
            ); 
        case 1: 
            return ( 
                <MDBContainer> 
                    <MDBRow> 
                        <MDBCol md="4"> 
                            <div className="doctor d-flex" onClick={nextStep}> 
                                <h3 className="doctor__name"> 
                                    Царик С А 
                                </h3> 
                                <img src={doctor} alt=""/> 
                            </div> 
                        </MDBCol> 
                    </MDBRow> 
                </MDBContainer> 
            ); 
        case 2: 
            return ( 
                <MDBContainer> 
                    <MDBRow> 
                        <MDBCol md="6"> 
                            <form> 
                                <p className="h5 text-center mb-4">Sign up</p> 
                                <div className="grey-text"> 
                                    <MDBInput 
                                        label="Your name" 
                                        icon="user" 
                                        group 
                                        type="text" 
                                        validate 
                                        error="wrong" 
                                        success="right" 
                                    /> 
                                    <MDBInput 
                                        label="Your email" 
                                        icon="envelope" 
                                        group 
                                        type="email" 
                                        validate 
                                        error="wrong" 
                                        success="right" 
                                    /> 
                                    <MDBInput 
                                        label="Confirm your email" 
                                        icon="exclamation-triangle" 
                                        group 
                                        type="text" 
                                        validate 
                                        error="wrong" 
                                        success="right" 
                                    /> 
                                    <MDBInput 
                                        label="Your password" 
                                        icon="lock" 
                                        group 
                                        type="password" 
                                        validate 
                                    /> 
                                </div> 
                                <div className="text-center"> 
                                    <MDBBtn color="primary">Register</MDBBtn> 
                                </div> 
                            </form> 
                        </MDBCol> 
                    </MDBRow> 
                </MDBContainer> 
            ); 
        default: 
            return 'Unknown step'; 
    } 
}

Answer 1

Мэп возвращает новый массив (подробнее тут), а в вашем случае нужно вернуть только одно значение на основании полученного шага (из step). Возможно, в вашем случае лучше использовать react-router-dom и отображать нужный шаг в зависимости от урла.

READ ALSO
Поддержка angular7 в ie9

Поддержка angular7 в ie9

Необходимо обеспечить поддержку angular7 в ie9По найденным советам уже подключил всевозможные полифиллы

140
D3 не работает в internet Explorer 11

D3 не работает в internet Explorer 11

Вот подключение D3 версии 57

135
Помогите с запросом в базу

Помогите с запросом в базу

Вообщем надо чтобы давало всем параметры юзерам которые есть в определённом кланеНо у меня получается только для 1 юзера

150