Как нацелиться на вложенные объекты и обратиться к Этому свойству?

Question

Я пытаюсь изменить состояние времени открытия / закрытия (а затем отправить в конечную точку) в течение нескольких дней, которые возвращаются мне в объекте, например, так:

Я отобразил их в компоненте React:

{this.state.time.map(each => (
    <Fragment key={each.code}>
        <OpeningHours
            code={each.code}
            day={each.description}
            name={each.code}
            open={each.open !== null ? each.open : '00:00'}
            close={each.close !== null ? each.close : '00:00'}
            onChange={this.onTimeChange}
        />
    </Fragment>
))}

Пользователь установит это время вручнуюредактирование ввода времени.Как получить this открытое или закрытое свойство редактируемого дня, а затем сохранить его в состоянии time?До сих пор я пробовал это, и это работает, но только если было только время открытия или одно поле в целом.Проблема возникает, так как у меня есть 2 поля для редактирования:

onTimeChange(e) {
  let times = this.state.time.slice();
  for(let i in time){
      if(times [i].name == event.target.name){
          times [i].value = event.target.value;
          this.setState ({time});
          break;
      }
  }
}

РЕДАКТИРОВАТЬ: компонент OpeningHours

const OpeningHours = props => (
    <div className={styles.block}>
        <label htmlFor={props.code} className={styles.label}>{props.day}</label>
        <div className={styles.container}>
            <input
                type="time"
                name={props.name}
                value={props.open !== null ? props.open : '00:00'}
                onChange={props.onChange}
                className={styles.timefield}
            />
            <input
                type="time"
                name={props.name}
                value={props.close !== null ? props.close : '00:00'}
                onChange={props.onChange}
                className={styles.timefield}
            />
        </div>
    </div>
);

Answer 1

Вы можете привязать идентифицирующую информацию к функции onChange, а затем использовать ее для внесения изменений.

`<input onChange={this.handleChange.bind(this, props.code)}</input>`

Вот пример того, как связаны данные: https://jsfiddle.net/jphuangjr/aq7mtfgo/112/

Answer 2

Одним из способов решения этой проблемы может быть передача функции onChange дополнительной информации о том, что в действительности меняется.

onTimeChange(field, e) {
  let times = this.state.time.slice();
  for(let i in time){
      if(times [i].name == event.target.name){
          if(field === 'open') {
              times [i].open = event.target.value;
              this.setState ({time});
              break;
          } else if (field === 'closed') {
              times [i].closed = event.target.value;
              this.setState ({time});
              break;
          }
      }
}

Это потребует небольшого изменения компонентов ввода:

<input
  type="time"
  name={props.name}
  value={props.open !== null ? props.open : '00:00'}
  onChange={ e => props.onChange('open', e) }
  className={styles.timefield}
/>