Question

每当用户单击addProcess事件按钮时，都会在同一个组件上创建一个动态表单。当我尝试编辑“不同节点”时，当我提交一个节点数据时，该动态表单正在不同节点上使用。再次出现相同的数据，我已经在这个任务上工作了一段时间了，我已经在google上尝试了一些东西，但是它们并没有按我预期的那样工作

这是我的渲染映射的代码

<form>
  {console.log(this.state.nodetext)}

  {this.state.texts.map((text, index) => (
    <div className="shareholder" key={index}>
      <input
        type="text"
        onChange={e => this.handleChange(e, index)}
        defaultValue={this.statetext}
      />
      <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>

这是我的saveProcess状态

saveProcess = () => {
  let node = this.state.edit;

  let nodes = [...this.state.nodes];

  let index = nodes.findIndex(el => el.id === node.id);
  console.log(this.state.texts);
  nodes[index].text = this.state.texts;
  this.setState({ nodes: nodes, dialogVisible_two: false });
}

这是我的editProcess按钮

editProcess = (info, node) => {
  this.setState({
    dialogVisible_two: true,
    info: info.component,
    nodeid: node.id,
    edit: node,
    nodetext: node.text
  });
}

这是我通过节点获得的结果 https://gyazo.com/7ac2ad586395143aadf6ab7e913a91b9

但是当我单击在文本字段中写有Process的第二个节点时，第一个节点文本将以该节点形式出现

这是我点击第二个节点得到节点1文本时的结果

动态表单，每种表单中都有不同的数据

0 个答案: