时间戳

首页 > 解决方案 > 如何动态呈现带有条件的输入字段？

reactjs - 如何动态呈现带有条件的输入字段？

问题描述

我正在尝试使用更少的代码并动态呈现输入字段。我有 4 个输入字段的动态输出，并且有 4 个名称和数量状态。

this.state = {
            input: {
                name1: '',
                name2: '',
                name3: '',
                name4: '',
                amount1: '',
                amount2: '',
                amount3: '',
                amount4: '',
            },

这里我如何渲染 4 个字段：

 {
        [1,2,3,4].map((i) => {
            return (
                <div>
                       <p>Name{i}</p>
                       <p>Amount:</p>
                  <div>
                    <Input
                      value={this.state.input[`name${i}`]}
                      onChange={(event) => {
                        this.updatePayee(`name${i}`, event.target.value);
                      }}
                    />
                    </div>
                       <p>Amount:</p>
                  <div>
                    <NumberInput
                      value={this.state.input[`amount${i}`]}
                      onChange={(event) => {
                        this.updateAmount(`amount${i}`, event.target.value);
                      }}
                    />
                    </div>
                </div>
                )
        })
    }

如何根据其他状态的情况动态输出 1,2,3,4？

{this.state.input.selection == "4" && (
    render 4 divs like above
 )}

 {this.state.input.selection == "3" && (
    render 3 divs like above
 )}

 {this.state.input.selection == "2" && (
    render 2 divs like above
 )}

 {this.state.input.selection == "1" && (
    render 1 divs like above
 )}

标签： reactjsdynamic

解决方案

您可以像这样动态地生成数组：

const elements = Array(this.state.input.selection).fill().map((v, i) => i + 1);

然后像现在一样使用

elements.map(...)

推荐阅读