У меня есть компонент, который отображает х количество DateInputs на основе х количество платежей. Входные данные даты должны отображаться со значением по умолчанию, загруженным с сервера. После запуска onChange он обновляет состояние в родительском элементе и печатает консоль с выбранной датой, используя computedProperty. Чтобы дать больше контекста, вот изображение страницы:
A, как вы можете видеть, указатель даты отображается для каждого сбора, а пользователь нуждается в Возможность изменить дату оплаты. Таким образом, с точки зрения потока данных, onChange в дочернем компоненте вызывает метод handleChargesDateChange в родительском элементе, так как состояние должно храниться в родительском компоненте.
В данный момент дата начисления по умолчанию отображается в раскрывающийся список, но при выполнении onChange значение даты не изменяется. Однако метод выводит правильную дату, которая была выбрана. Опять же, для большего контекста, приведен скриншот данных, хранящихся в parent, когда дочерний элемент выполняет onChange в средстве выбора даты.
Как видите, значения даты изменяются, когда пользователь выбирает одно из каждого средства выбора даты. Однако фактическое значение DatePicker остается прежним. Я могу заставить его работать там, где он рендерится с пустой датой для каждого средства выбора даты, и когда пользователь выбирает новую дату, он будет отображать средство выбора даты с выбранной датой. Он также сохранил значение в parent. Но я действительно изо всех сил пытаюсь отобразить значение defalt, но когда оно меняется, обновите указатель даты с выбранным пользователем значением ... Надеюсь, это имеет смысл ... В любом случае вот код. Таким образом, метод, который запускается в родительском:
handleChargesDateChange = (e) => {
const date = e.target.value;
const momentDate = moment(date);
const chargeId = e.target.name;
console.log(date);
console.log(momentDate);
this.setState({
updatedChargeDates: [
...this.state.updatedChargeDates,
{[chargeId]: date}
]
}, () => console.log(this.state.updatedChargeDates))
}
Затем передается (около 3 дочерних элементов) через:
<Grid.Row>
<Grid.Column width={16}>
<OrderSummary
order={this.state.order}
fuelTypes={this.state.fuelTypes}
vehicleClasses={this.state.vehicleClasses}
deviceTypes={this.state.deviceTypes}
chargeTypes={this.state.chargeTypes}
featureTypes={this.state.featureTypes}
itemGroups={this.state.itemGroups}
itemTypes={this.state.itemTypes}
updateChargeDates={this.handleChargesDateChange}
chargeDates={this.state.updatedChargeDates}
/>
</Grid.Column>
Я пропущу различные другие дочерние компоненты, которые метод передается и go прямо на созданный компонент. Таким образом, метод приземляется на Charges:
export class Charges extends Component {
constructor(props) {
super(props);
this.state = {
currentItem: 0,
newDate: '',
fields: {}
}
}
render() {
const {charges, chargeTypes, updateChargeDates, chargeDates} = this.props;
console.log('Props method', charges);
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={updateChargeDates}***
***value={chargeDates[charge.id] == null ? charge.effectiveDate : chargeDates[charge.id]}***
/>
</Grid.Column>
</Grid.Row>
</Grid>
})}
<Divider hidden />
<br />
</Form>
}
Я выделил код преступника с помощью ***, чтобы было легче следовать. Я использую оператор троичного типа, чтобы определить, какое значение отображать, но оно не обновляется, когда я выбираю значение. Я подумал, что из кода, который у меня есть, если начальный chargeDates[charge.id] равен нулю, то мы отображаем charge.effectiveDate это то, что он делает, но как только я изменю дату, я ожидаю, что chargeDates[charge.id] будет иметь значение, которое, в свою очередь, должно отображать это значение ...
Я действительно надеюсь, что это имеет смысл, я Я уверен, что я упускаю из виду это здесь, и это будет простое решение .. Но мне кажется, что я новичок ie, чтобы среагировать, я в замешательстве ..
У меня есть желание следовать следующим ресурсам, но это действительно не дает мне то, что я хочу:
Несколько DatePickers в состоянии
Состояние Daepicker
Если вам нужно больше вопросов или пожалуйста, дайте мне знать!