javascript - 将单击列表的值传递给 EditForm 进行编辑

Question

我正在使用reactjs和redux来开发仪表板。我已经完成了添加、删除，但编辑不起作用。当用户单击项目时，文本字段应显示其当前值并能够提交更改。我可以在单击时显示文本字段，但无法显示单击的该项目的当前值。要显示文本字段，我必须在 li 标签上使用 onClick，否则我可以像使用 this.props.editTab(tab) 一样传递数据。我现在如何将单击项目的数据发送到 editTab 操作？

constructor(props) {
  super(props);
  this.state = { open: false, editing: false };
}

editTab() {
  const tabs = _.map(this.props.tabs, (tab) => {
      if (tab.editable) {
        return (
            <li
              className="list-group-items delete-tab-list"
              onClick={() => this.setState({ editing: true })}
              key={tab.id}
            >
              <i className="material-icons">{tab.icon}</i>{tab.name}
            </li>
        );
      }
  });
  return (
      <div className="device-action">
        <Dialog
            title="Update a Tab"
            modal={false}
            bodyStyle={{ background: '#fff' }}
            contentStyle={customContentStyle}
            actionsContainerStyle={{ background: '#fff' }}
            titleStyle={{ background: '#fff', color: '#1ab394' }}
            open={this.props.createTab.open}
            onRequestClose={this.props.closeTabIcon}
        >
          <ul className="list-group">
            { this.state.editing ?
                  <EditForm
                      tab={this.props.tabs}
                      editing={this.state.editing}
                  /> :
                 tabs
             }
          </ul>
        </Dialog>
      </div>
    );
}


handleEditSave = (name, icon) => {
    this.props.editTab(name, icon);
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleEditSave}>
        <div className="tab-name">
          <TextField
            floatingLabelText="Name"
            onChange={(name) => { this.setState({ name: name.target.value }); }}
          />
        </div>
        <div className="icon">
          <AutoComplete
            floatingLabelText="select any icon"
            filter={AutoComplete.noFilter}
            openOnFocus
            onNewRequest={(e) => { this.setState({ icon: e.id }); }}
          />
        </div>
        <button className="btn">Save</button>
        </form>
      </div>
    );
  }

如何将单击的项目数据传递给 EditForm 组件，以便我可以通过这种方式在 this.props.editTab(tab) 中触发我的操作？

Answer 1

您可以通过将其保存在状态上来简单地跟踪您编辑的选项卡。仅当您想一次编辑 1 个选项卡时，此功能才有效。否则你可以使用对象/数组。

constructor(props) {
  super(props);
  this.state = { open: false, editing: null };
}

editTab() {
  const tabs = _.map(this.props.tabs, (tab) => {
      if (tab.editable) {
        return (
            <li
              className="list-group-items delete-tab-list"
              onClick={() => this.setState({ editing: tab })}
              key={tab.id}
            >
              <i className="material-icons">{tab.icon}</i>{tab.name}
            </li>
        );
      }
  });

  const { editing } = this.state;

  // editing is the Tab object that we edit
  if (editing)
    console.log("Editing tab: " + editable.name);

  return (
      <div className="device-action">
        <Dialog
            title="Update a Tab"
            modal={false}
            bodyStyle={{ background: '#fff' }}
            contentStyle={customContentStyle}
            actionsContainerStyle={{ background: '#fff' }}
            titleStyle={{ background: '#fff', color: '#1ab394' }}
            open={this.props.createTab.open}
            onRequestClose={this.props.closeTabIcon}
        >
          <ul className="list-group">
            { this.state.editing ?
                  <EditForm
                      tab={this.props.tabs}
                      editing={this.state.editing}
                  /> :
                 tabs
             }
          </ul>
        </Dialog>
      </div>
    );
}


handleEditSave = (name, icon) => {
    this.props.editTab(name, icon);
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleEditSave}>
        <div className="tab-name">
          <TextField
            floatingLabelText="Name"
            onChange={(name) => { this.setState({ name: name.target.value }); }}
          />
        </div>
        <div className="icon">
          <AutoComplete
            floatingLabelText="select any icon"
            filter={AutoComplete.noFilter}
            openOnFocus
            onNewRequest={(e) => { this.setState({ icon: e.id }); }}
          />
        </div>
        <button className="btn">Save</button>
        </form>
      </div>
    );
  }