javascript - JavaScript/React自动填充第一个字段

1.我有12个索引“ listOfPaysIndexes”的数组，我正在使用此数组来遍历她并呈现12个DateInput字段。

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

3.当您在第一个DateInput中选择日期时，所有其他DateInputs应该自动填充该值。

最好的方法是在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>
      )
    })}

日期输入的外观如下：

最佳答案

您应该能够按照以下方式做一些事情，这只是出于想法，我不知道您的确切代码，将this替换为您用来引用上下文的内容，并将方法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>
))}