将点击列表的值传递给EditForm进行编辑

Question

我正在做reactjs和redux开发仪表板。我已经做了添加，删除，但编辑不工作。当用户单击项目时，文本字段应该显示其当前值，并能够提交更改。我可以显示文本字段时单击，但不能显示该项目被单击的当前值。要显示textField，我必须在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

您可以通过将其保存在状态来简单地跟踪您编辑的选项卡。这将只工作，如果你想编辑一个选项卡的时间。否则你可以使用Object/Array。

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>
    );
  }