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

Question

1. 我有 12 个索引的数组“listOfPaysIndexes”，我使用这个数组来迭代她并呈现 12 个 DateInput 字段。

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

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

在 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>
      )
    })}

日期输入的外观如下:

Answer 1

您应该能够按照这些思路做一些事情，这只是为了想法，我不知道您的确切代码，请将 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>
))}