JavaScript/React根据第一个字段自动填充其他字段

1。我有一个12个索引的数组“支付索引列表””，我正在使用这个数组遍历她并呈现12个日期输入字段

2。您可以单击每个字段并选择日期

3.当您在first date Input中选择日期时，所有其他日期输入都应自动填入该值

在react javascript中实现这一点的最佳方法是什么

以下是代码：

 {*You can see here that listOfPaysIndexes which have 12 indexes.
   For every index there is one DateInput. *}

   {listOfPaysIndexes.map(value => {
      return (
        <Form.Group
          widths="equal"
          key={`month_${value}`}
        >
          <Form.Field width={5}>
            {/*** HERE IS DATE FIELD ***/}
            <DateInput
              name={`ending_period_monthly[${value}]`}
              value={values.ending_period_monthly[value]}
              onChange={handleChange}
              dateFormat={'MM/DD/YYYY'}
            />
            )}
          </Form.Field>

        </Form.Group>
      )
    })}

{*您可以在这里看到PaysIndex列表，它有12个索引。
每个索引都有一个DateInput.*}
{listofPaysIndex.map（值=>{
返回(
{/***这是日期字段***/}
)}
)
})}

以下是该日期输入的外观：

---

您应该能够按照这些思路做一些事情，这只是出于想法，我不知道您的确切代码，请将

此

替换为您用于引用上下文的任何内容，并将方法

getValueFromEvent

替换为您用于从事件获取值的任何内容

handleChange(index, event) {
    if (index === 1) {
        listOfPaysIndexes.forEach(value => {
            values.ending_period_monthly[value] = getValueFromEvent(event);
        });
    }

    // handler for others
}

{listOfPaysIndexes.map(value => (
    <Form.Group
        widths="equal"
        key={`month_${value}`}
    >
        <Form.Field width={5}>
        {/*** HERE IS DATE FIELD ***/}
        <DateInput
            name={`ending_period_monthly[${value}]`}
            value={values.ending_period_monthly[value]}
            onChange={handleChange.bind(this, value)}
            dateFormat={'MM/DD/YYYY'}
        />
        )}
        </Form.Field>
    </Form.Group>
))}

handleChange（索引、事件）{
如果（索引==1）{
forEach（值=>{
values.end_period_monthly[值]=getValueFromEvent（事件）；
});
}
//处理他人事务的人
}
{listofPaysIndex.map（值=>(
{/***这是日期字段***/}
)}
))}

您只需要为第一个日期输入执行此操作？@AvcS是，仅为第一个日期输入