Ошибка реагирования: объявляется, но ее значение никогда не читается.[6133] - PullRequest
Новая
       12

Ошибка реагирования: объявляется, но ее значение никогда не читается.[6133]

0 голосов
/ 30 января 2019

Я создал модал (Тип бенефициара) и пытаюсь вызвать другой мод, когда выбираю Персона в качестве Типа бенефициара и нажимаю на следующую в модале Тип бенефициара, но пока я пытаюсь реализовать его, яошибка ниже двух пунктов: 1. Когда я импортирую второй модал (personModal), он показывает мне сообщение «personModal объявлен, но его значение никогда не читается. [6133]», хотя я использую этот импорт и, следовательно, этоне получить навигацию.2. При переходе к personModal после нажатия кнопки «Далее», присутствующей в модале типа бенефициара, я хочу скрыть первый модал и показать только второй модал без использования навигатора реакции и маршрутов реакции. Есть ли способ сделать это?

Пожалуйста, помогите.

Для справки, пожалуйста, найдите код ниже:

  • Тип получателя модальный 

    import React, { Component } from 'react';
import Select from 'gssp-common-ui/lib/components/select/select.component';
import Button from 'gssp-common-ui/lib/components/button/button.component';
import personModal from './personModal.component';


const backdropStyle = {
    position: 'fixed',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.3)',
    padding: 50
};
const modalStyle = {
    backgroundColor: '#fff',
    borderRadius: 5,
    maxWidth: 500,
    minHeight: 300,
    margin: '0 auto',
    padding: 30,
    position: 'relative'
};

class Modal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dropDownValue: '',
            showBeneficiaryModel: false
        };
    }
    handleDropDownChange = (event, value) => {
        this.setState({ dropDownValue: value });
    }
    clickHandlernextBtn = (e) => {
        if ((e === 'click') && (this.state.dropDownValue === 'Person')) {
            return (
                <div>
                    {console.log('Dropdown value is ', this.state.dropDownValue)}
                    <personModal />
                </div>);
        }
    };

    render() {
        if (!this.props.show) {
            return null;
        }

        return (
            <div style={backdropStyle}>
                <div style={modalStyle}>
                    <h5><b>{'Add Beneficiary'}</b></h5>
                    <p>{'All fields are required unless otherwise noted.'}</p>
                    {/* <form onSubmit={this.handleSubmit}>

                        <select value={this.state.value} onChange={this.handleChange} >
                            <b><option value="beneficiary type">{'Beneficiary Type'}</option></b>
                            <option value="person">{'Person'}</option>
                            <option value="living trust">{'Living Trust'}</option>
                            <option value="testamentary trust created in the insured’s will">{'Testamentary Trust created in the Insured’s Will'}</option>
                            <option value="charity/organization">{'Charity/Organization'}</option>
                            <option value="estate ">{'Estate '}</option>
                        </select>

                        <input type="submit" value="Submit" />
                    </form> */}
                    <Select
                        className="dropdown-class"
                        title={'Beneficiary Type'}
                        options={[
                            {
                                key: 'Person',
                                value: 'Person'
                            },
                            {
                                key: 'Living Trust',
                                value: 'Living Trust'
                            },
                            {
                                key: 'Remove ClasTestamentary Trust created in the Insured’s Will',
        `enter code here`                        value: 'Testamentary Trust created in the Insured’s Will'
                     enter code here       },
                            {
                                key: 'Charity/Organization',
                                value: 'Charity/Organization'
                            },
                            {
                                key: 'Estate',
                                value: 'Estate'
                            }


                        ]
                        }
        onEvent={(event, value) => this.handleDropDownChange(event, value)}
                    />
                    <Button
                        value="NEXT"
                        className="next_btn"
                        id="SMDEmployer_schedulepayment_next-button"
                        onEvent={e => this.clickHandlernextBtn(e)}
                    />
                </div>
            </div>
        );
    }
}
export default Modal;

  • personModal.component 

    import React, { Component } from 'react';
class personModal extends Component {
 constructor(props) {
    super(props);
    this.state = {
        dropDownValue: ''
    };
 }  
 render() {
  return (            
    <div>
        {'Hi PersonModal here'}
    </div>
  );
 }
}
export default personModal;

Примечание : кнопка - это пользовательский компонент, который работает нормально.

...