Как отобразить реквизиты флажка и входное значение в объект / массив в реаги? - PullRequest
Новая
       34

Как отобразить реквизиты флажка и входное значение в объект / массив в реаги?

0 голосов
/ 13 июня 2019

Я пытаюсь отобразить расписание пользователей, где они могут выбрать дни и время, когда они доступны. Я знаю, что мне нужно использовать ключевое свойство для группировки компонентов, но как? плагин, который я использую только для времени, предоставляет событие изменения для форматированной даты

Это довольно сложно для меня понять, потому что я впервые использую React. Как было бы возможно сгруппировать эти значения в объект из отображения? 

import Checkbox from '../../authlayout';
import Input from '../../../components/Input';
import Select from 'react-select'
import TimePicker from 'rc-time-picker';
import 'rc-time-picker/assets/index.css';

const UserLocation = (props) => {
    const { handleSubmit, nextPage, prevPage, onChange } = props;

    function change(value) {
        console.log(value.format("HH:mm"));
    }

    const days = [
        {
            "value": "monday",
            "label": "Monday"
        },
        {
            "value": "tuesday",
            "label": "Tuesday"
        },
        {
            "value": "wednesday",
            "label": "Wednesday"
        },
        {
            "value": "thursday",
            "label": "Thursday"
        },
        {
            "value": "friday",
            "label": "Friday"
        },
        {
            "value": "saturday",
            "label": "Saturday"
        },
        {
            "value": "sunday",
            "label": "Sunday"
        },
    ]

    return (
        <div className="text-center pt-5 mt-0 mb-auto">
            <div className="mt-2 mt-5 no-style">
                <div className="mt-4">
                    <div className="separator mb-4"><span>Days and time availability</span></div>
                    <div className="form-group">
                        {days.map((day, key) =>
                            <div className="custom-control custom-checkbox mt-3 text-left d-block" key={key}>
                                <div className="row align-items-center">
                                    <div className="col-4">
                                        <input type="checkbox" className="custom-control-input" id={day.value} />
                                        <label className="custom-control-label w-100" htmlFor={day.value}>{day.label}</label>
                                    </div>
                                    <div className="col-4">
                                        <TimePicker
                                            showSecond={false}
                                            placeholder="From"
                                            className="xxx"
                                            inputReadOnly={true}
                                            onChange={change}
                                        />
                                    </div>
                                    <div className="col-4">
                                        <TimePicker
                                            showSecond={false}
                                            placeholder="To"
                                            className="xxx"
                                            inputReadOnly={true}
                                        />
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            <button className="btn btn-primary my-4" onClick {nextPage}>Next</button>
        </div>)
}

    export default UserLocation;
...