代码之家 › 专栏 › 技术社区 › James Delaney

javascript/react自动填充其他基于第一个字段的字段

reactjs arrays javascript

James Delaney · 技术社区 · 6 年前

1. I have array of 12 indexes“ ListofPaySindexes ”,I am using this array to iterate through her and render 12 dateinput fields.

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

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

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

这是代码:
您可以在这里看到有12个索引的付款索引列表。对于每个索引,都有一个日期输入。*} listofPaysIndexes.map(value=>){ 返回( 形式群宽度=“相等” key=`月值` gt; <form.field width=5_gt; /***这里是日期字段***/ 数据输入 name=`结束期间每月[$值]` value=values.ending_period_monthly[value] onchange=handlechange_ 日期格式='mm/dd/yyyy' /gt; } </form.field> </form.group> ) })} < /代码>
以下是日期输入的外观: .

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

三。当您在第一个日期输入中选择日期时,所有其他日期输入都应该用该值自动填充。

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

以下是日期输入的外观:

1 回复 | 直到 6 年前

AvcS 6 年前

你应该能够沿着这些线做一些事情,这只是为了我不知道你确切的代码,替换 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>
))}