передать значение щелкнутого списка в EditForm для редактирования

Я занимаюсь реакцией и сокращением для разработки приборной панели. Я сделал добавить, удалить, но редактирование не работает. Когда пользователь нажимает на элемент, текстовое поле должно отображаться с его текущим значением и может отправлять изменения. Я могу показать текстовое поле при нажатии, но не могу показать текущее значение этого элемента, который нажал. Для отображения textField я должен использовать onClick в теге li, иначе я мог бы передавать данные, например, используя this.props.editTab (вкладка). Как я могу теперь отправлять данные щелкнутого элемента для действия 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 (вкладке) таким образом?

javascript,reactjs,redux,react-redux,

0

Ответов: 1

1 принят

Вы можете просто отслеживать вкладку, которую вы редактируете, сохраняя ее в состоянии. Это будет работать только в том случае, если вы хотите отредактировать 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>
    );
  }
JavaScript, reactjs, перевождь, реагируют-перевождь,
Похожие вопросы
Яндекс.Метрика