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函数。

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}
/>

Answer 2

您可以将标识信息绑定到onChange函数，然后使用该信息进行更改。

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

以下是如何绑定数据的示例：https://jsfiddle.net/jphuangjr/aq7mtfgo/112/

如何定位嵌套对象并引用此属性？

2 个答案: