这是我的表单,处于动态状态,您可以添加或删除输入字段。
这我只想在所有字段中获得一个对象,或者我只想完成一次映射工作即可
<form>
{this.state.t.map((text, index) => (
<div className="shareholder" key={index}>
<input
type="text"
name="abc"
onChange={(e) => this.handleChange(e, index)}
defaultValue={this.state.nodetext} />
<button
type="button"
onClick={()=>this.handleRemove(index)}
className="small">
-
</button>
</div>
))}
<button
type="button"
onClick={(e) => this.addProcess(e)}
className="small"
>
Add Process
</button>
<button
type="button"
onClick={(e)=>this.saveProcess(e)}
className="small">
Edit
</button>
</form>
这是添加和删除输入字段的地方
addProcess() {
this.setState({ t: [...this.state.t, ""] });
}
handleChange(e, index) {
//eslint-disable-next-line
this.state.t[index] = e.target.value
this.setState({ texts: this.state.t })
}
handleRemove(index) {
this.state.t.splice(index, 1)
this.setState({ texts: this.state.t })
}
提交表单后,请点击这里
saveProcess = () => {
let node = this.state.edit;
let nodes = [...this.state.nodes];
let index = nodes.findIndex(el => el.id === node.id);
this.setState({t:[0]})
let proc = {
texts: this.state.t.map((text, index) => [
{
textid:this.state.nodeid,
text:this.state.texts
}
])
}
console.log(proc.texts)
nodes[index].text = proc.texts;
this.setState({ nodes: nodes, dialogVisible_two: false });
}
我在做控制台时得到的结果
```console.log(proc.texts)```
是
https://gyazo.com/3e34d7236990a3a669234d0debcd0215
这我只想在所有字段中获得一个对象,或者我只想完成一次映射工作即可