Получение значения id и установка его в состояние в реакции - PullRequest
Новая
       3

Получение значения id и установка его в состояние в реакции

1 голос
/ 15 января 2020

У меня есть повторно используемый компонент Dropdown, который я использую в своем родительском компоненте 

class Dropdown extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowing: false,
            listData: this.props.data,
            chosenValue: this.props.date ? this.props.date : "Izaberi"
        }
    }

    componentDidMount() {
        document.addEventListener('mousedown', this.handleClickOutside);
    }

    componentWillUnmount() {
        document.removeEventListener('mousedown', this.handleClickOutside);
    }

    handleClickOutside = () => {
        this.setState({ isShowing: false })
    }

    handleClick = () => {
        this.setState({ isShowing: true })
    }

    handleChange = (e, data) => {
       e.stopPropagation();
       this.setState({ chosenValue: data })
       this.props.handleChange(e, data);
    }

    render() {
        return (
            <div className="input-with-arrrow">
                <input type="text" className="form-input toggle-popup" value={this.state.chosenValue} onChange={this.handleChange} onClick={this.handleClick} />
                <div className="popup" style={{ display: this.state.isShowing ? "block" : "none" }}>
                    <ul>
                        {
                            this.props.data.map((item, key) => {
                                return <li className="popup-items" key={key} id={item.id} onMouseDown={(e) => this.handleChange(e, item.name)}>{item.name}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
}

export default Dropdown;

Мой родительский компонент выглядит следующим образом 

class SingleCallView extends React.Component {
    constructor(props) {
        super(props);
        this.handleChangeInput = this.handleChangeInput.bind(this);

    }

    state = {
        contact_type: '',
        call_type: ''
    };


    componentWillMount() {
        this.props.fetchForm();
    }


    handleChangeInput = (event, data) => {
        const target = event.target;
        const name = target.name;
        const value = target.value;
        this.setState({ [name]: value });
    };

    render() {

        const [call_types, contact_types] = this.props.formData;
        return (
                                <Dropdown id="contact_type" data={contact_types} handleChange= {this.handleChangeInput} />

                                <Dropdown id="call_type" data={call_types} handleChange={this.handleChangeInput} /> <br />

        )
    }
}

const mapStateToProps = state => ({
    formData: state.formData.formData,
    calls: state.calls.calls
});

export default connect(
    mapStateToProps,
    { fetchForm, addCall }
) 
(SingleCallView);

Массивы, которые я передаю в раскрывающийся компонент, имеют объекты с атрибутами («id», «name») я могу открыть выпадающий список и посмотреть список имен, выбрать его и изменить selectedValue. Мне нужно изменить состояние в родительском компоненте, чтобы this.state.contact_type получало ("id") значение

Ответы [ 2 ]

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

Я решил эту проблему, добавив метод handleDropdown в дочерний и родительский компонент 

//child
handleDropdown = (event) => {
        const {value} = event.target;
        this.props.onChange(value);
    };

//add to input element
onChange={this.handleDropdown}
//add to li element
id={this.props.id}

//add to parent component
handleDropdown = (event, data) => {
        const target = event.target;
        const name = target.id;
        const value = target.value;
        this.setState({ [name]: value });
    };
//<Dropdown> should look like this
<Dropdown data={contact_types} id={'contact_type'} handleChange={this.handleDropdown} onChange={this.handleDropdown}/>
0 голосов
/ 15 января 2020

Вы должны добавить getDerivedStateFromProps событие жизненного цикла в DropDown Компонент и вместо этого удалить из него состояние значения chosenValue, вы можете напрямую использовать значение реквизита внутри DropDown Компонента.

...