只映射一次意味着Reactjs条件映射

时间:2019-04-18 09:52:15

标签: reactjs

这是我的表单,处于动态状态,您可以添加或删除输入字段。

这我只想在所有字段中获得一个对象,或者我只想完成一次映射工作即可

     <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

这我只想在所有字段中获得一个对象,或者我只想完成一次映射工作即可

0 个答案:

没有答案