Реагировать. js хранить несколько дат выбора даты против идентификаторов в состоянии - PullRequest
Новая
       2

Реагировать. js хранить несколько дат выбора даты против идентификаторов в состоянии

0 голосов
/ 06 февраля 2020

У меня проблема с генерацией датеров on the fly на основе количества пропущенных реквизитов. Реквизиты, передаваемые из родительского компонента, являются платой за конкретный продукт. Так, скажем, 6 сборов, затем мы создаем поле ввода, содержащее заряд, а затем для каждого из них должен отображаться соответствующий указатель даты.

Надеемся, что изображение ниже показывает это лучше, чем я мог бы объяснить! (Изображение рисует тысячу слов, которые они говорят !!)

enter image description here

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

Я не могу просто иметь значения в предустановленном состоянии, так как количество сборщиков дат и сборов может отличаться каждый раз. Иногда может быть 1, иногда может быть 10.

Код, который я имею для этого компонента, выглядит следующим образом: 

export class Charges extends Component {

constructor(props) {
    super(props);

    this.state = {
        currentItem: 0,
        newDate: ''
        fields: []
    }

    this.handleChange = this.handleChange.bind(this);
}


****** EDIT *********
handleDateChange = (e) => {
    const date = e.target.value;
    const chargeId = e.target.name;
    console.log(date);
    this.setState({
        fields: [
            ...this.state.fields,
            [chargeId]: date
        ]
    }, () => console.log(this.state.fields))
}
**********

render() {
 const {charges, chargeTypes} = this.props;
 if (charges.length === 0) { return null; }

return <Form>
    <h3>Charges</h3>
    {charges.map(charge => {
        console.log(charge);
        const chargeType = chargeTypes.find(type => type.code === charge.type) || {};
        return <Grid>
            <Grid.Row columns={2}>
                <Grid.Column>
                    <Form.Input
                        key={charge.id}
                        label={chargeType.description || charge.type}
                        value={Number(charge.amount).toFixed(2)}
                        readOnly
                        width={6} />
                </Grid.Column>
                <Grid.Column>
                    <DateInput
                        name={charge.id}
                        selected={this.state.newDate}
                        onChange={this.handleChange}
                        value={charge.effectiveDate}
                    />
                </Grid.Column>
            </Grid.Row>
        </Grid>
    })}
    <Divider hidden />
    <br />
</Form>
}
}

Как видите, я просто перезапишу предыдущее состояние значение, если пользователь должен был обновить более одного средства выбора даты?

Я просмотрел следующую статью, но это не совсем то, что я хочу: Реакция множественных DatePickers

Как можно я достигаю функциональности, которую хочу? Надеюсь, я это прояснил? Если есть какие-либо вопросы, пожалуйста, не стесняйтесь спрашивать!

* Отредактированный ответ *

Я теперь обновил handleDateChangeMethod для хранения данных в массиве (как это то, что я хочу) однако, это дает мне только chargeId, а не дату, назначенную ему!

См. скриншот ниже:

enter image description here

Можно ли как-то сохранить это в массиве состояний [chargeId: date]

1 Ответ

1 голос
/ 06 февраля 2020

Вы можете установить уникальную опору в state для каждого указателя даты по его атрибуту name, используя вычисляемое свойство 

handleChange = (e, date) => {
    const value = moment(date);
    const chargeId = e.target.name;
    console.log(chargeId);
    this.setState({[chargeId]: value}, () => console.log(this.state[chargeId]));
}

Подробнее об этом подходе на веб-сайте React: https://reactjs.org/docs/forms.html#handling -кратного-входы

...