ReactJS - 使用双输入动态更新表单

问题描述 投票:0回答:1

我正在尝试使用双输入更新表单,每次用户单击“添加”按钮并使用其值改变状态并且我希望该输入为其“连接”。如果我用图形显示我想要做的事情,那将更容易理解:

[input] [second input] [remove button]
[input] [second input] [remove button]
[input] [second input] [remove button] ...

当我试图动态生成一个输入时,这更容易,目前我甚至没有完整的代码,因为我不知道如何做到但我有一些部分,这是它:

州:

  stuff: {
            item: [],
            quantity: []
        },

这是仅动态添加一个输入字段的代码:

// i mapped stuff because before i only had one array and like this-> stuff: []   
return this.state.stuff.map((element, index) => 
     <div key={index}>
        <input type="text" value={element||''} onChange={this.handleChange.bind(this, index)} />
        <input type='button' value='remove' onClick={this.removeInput.bind(this, index)}/>
     </div>          
 )

  handleChange(index, event) {
 let stuff = [...this.state.stuff];
 stuff[index] = event.target.value;
 this.setState({ stuff });
 }

     add(){
        this.setState(previousState => ({ stuff: [...previousState.stuff,'']}))
 }

     removeInput(index){
   let stuff = [...this.state.stuff];
   stuff.splice(index,1);
   this.setState({ stuff });
 }

说实话,我只是尝试每一个想法,在add()函数中,我无法完全理解如何将''添加到数组中使代码工作,如果有人解释这个并给我解决方案我想做什么我会感激。

javascript arrays reactjs state
1个回答
2
投票

我无法完全了解如何在stuff数组中添加''使代码工作

如果你查看你的render()方法,你会看到this.state.stuff.map(...),所以你基本上将stuff数组中的每个值映射到相关的输入。因此,如果向stuff添加另一个值,则组件会重新渲染并映射新输入。


现在要为每一行添加两个输入,您可以保留两个数组,但这会使以后管理数据变得更加困难。相反,我会使用一个包含item和quantity属性的对象数组。为此,在add()方法内添加新对象:

  this.setState(({ stuff }) => ({ stuff: [...stuff, { item: "", quantity: 0 }));

然后你必须在render()中更改你的映射来显示那些对象:

 this.state.stuff.map(({ item, quantity }, index) => (
  <div>
   Item: <input value={item} onChange={e => this.update(index, "item", e.target.value)} />
   Quantity: <input value={quantity} onChange={e => this.update(index, "quantity", e.target.value)} />
  </div>
 ));

现在唯一剩下的就是更新方法,它不仅需要索引,还需要更改密钥:

 update(index, key, value) {
   this.setState(({ stuff }) => ({ stuff: stuff.map((it, i) => i === index ? { ...it, [key]: value }, it)) }));
 }
© www.soinside.com 2019 - 2024. All rights reserved.