Question

我在react js中有一个动态表单，它给出了类似下面的输出 -

screes are here of console logs - http://imgur.com/a/w9KYN

对象按键：阵列[2] 0 ： 1 1 ： 2 长度： 2 的原：阵列[0] 名-1 ： “法案” 名-2 ： “会” noItems-1 ： 50 noItems-2 ： 50050 tVal-1 ： 500 tVal-2 ： 2520 值-1 ： 500 值-2- ： 500

Console.log（JSON.Stringfy（values）） -

{"keys":[1,2],"names-1":"will","values-1":200,"noItems-1":2002,"tVal-1":200,"names-2":"bill","values-2":200,"noItems-2":2002,"tVal-2":200}

如果我从中间删除一个或两个表单项 - 这是输出 -

{"keys":[1,4],"names-1":"will","values-1":200,"noItems-1":2002,"tVal-1":200,"names-4":"dill","values-4":300,"noItems-4":300,"tVal-4":300}

我可以用这种方式读取keys数组 -

console.log('Recived values:', values.keys);

但我想迭代这些值，有人可以帮助我迭代这些值吗？具体如何得到'names-1'和'names-2'？因为字符串是基于键数组的吗？

代码段在这里：

hadleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        if(!err){
            var lis = values.keys;
            this.setState({
                controlKey: lis
            });
            lis.forEach(function(value){
                /* need help to iterate here*/
            })
            console.log('Recived values:', values.keys);
        }
    })
}

我的渲染组件看起来像这样 -

const {getFieldDecorator, getFieldValue}  = this.props.form;
    const formItemLayoutWithOutLabel = {
        wrapperCol: {
            xs: { span: 24, offset: 0 },
            sm: { span: 20, offset: 4 },
            },
    };
    getFieldDecorator('keys', {initialValue:[]});
    const keys = getFieldValue('keys');
    const formItems = keys.map((k, index) => {
        return(
            <div>
                <Row>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Item' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`names-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    whitespace: true,
                                    message: 'Please input item name',
                                }],
                            })(
                                <Input placeholder="Item Name" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Value/Unit' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`values-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Please input item value',
                                }],
                            })(
                                <InputNumber placeholder="Item value per unit" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span = {6}>
                        <FormItem
                            label={index === 0 ? 'Total Unit' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`noItems-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Please input total number of items',
                                }],
                            })(
                                <InputNumber placeholder="Please input total number of items" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Total Value' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`tVal-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Total Value',
                                }],
                            })(
                                <InputNumber placeholder="Total Value" style={{width: '75%'}}/>
                            )}
                            <Icon
                                className="dynamic-delete-button"
                                type="minus-circle-o"
                                disabled={keys.length === 1}
                                onClick={() => this.remove(k)}
                            />
                        </FormItem>
                    </Col>
                </Row>
            </div>

Answer 1

你想要做的是定义要使用的变量

＆＃xA;＆＃xA;

  const myVars = ['names'，'noItems'，'tVal'，' values']＆＃xA; let totalVal = 0;＆＃xA; lis.forEach（（value）=＆gt; {＆＃xA; myVars.forEach（myVar =＆gt; {＆＃xA; const key =`$ { myVar}  -  $ {value}`＆＃xA; console.log（`$ {key}：$ {values [key]}`）＆＃xA; if（myVar ==='tVal'）{＆＃xA; totalVal + = values [key]＆＃xA;}＆＃xA;}）＆＃xA;}）＆＃xA; console.log（totalVal）;＆＃xA;

＆＃xA ;＆＃xA;

FIDDLE

＆＃xA;＆＃xA;

所以基本上我在这里做的是使用 myVars 数组来定义我感兴趣的键。从那里我循环遍历keys数组以知道创建哪个变量又名名称数。然后在该键上使用值（原始对象）括号或子表示法来获取实际值。

＆＃xA;

反应中的动态变量js

1 个答案: