クリックしたリストの値を編集するEditFormに渡します

Question

私はreactjsとreduxを使ってダッシュボードを開発しています。私は追加、削除を行ったが、編集は機能していない。ユーザーがアイテムをクリックすると、テキストフィールドに現在の値が表示され、変更を送信できます。クリックするとテキストフィールドを表示できますが、クリックされたアイテムの現在の値は表示できませんでした。 textFieldを表示するには、liタグでonClickを使用する必要があります。そうでないと、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> 
    ); 
    } 

どのように私はthis.props.editTab（タブ）で、このように自分の行動を誘発することができるようにのEditFormコンポーネントに項目データをクリック渡すことができますか？

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