我正在尝试使用双输入更新表单,每次用户单击“添加”按钮并使用其值改变状态并且我希望该输入为其“连接”。如果我用图形显示我想要做的事情,那将更容易理解:
[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()函数中,我无法完全理解如何将''
添加到数组中使代码工作,如果有人解释这个并给我解决方案我想做什么我会感激。
我无法完全了解如何在
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)) }));
}