編輯reactjs鏈接的內容

Question

我需要你的幫助。
我有一個鏈接，這是我的Reactjs項目：

<a class="nav-link" data-toggle="tab" href="#NewTab4" aria-expanded="false">My Link</a> 

我要加倍點擊這個鏈接，我可以編輯「我的鏈接」（成爲「您的鏈接」）。
然後我按Enter鍵盤，「我的鏈接」變成「您的鏈接」。

謝謝。對不起我英語不好。

Answer 1

您需要將標籤存儲在組件狀態中，以便在發生事件時更改它。

class Link extends Component { 
    constructor() { 
    this.state = { 
     label: 'New Tab', // default label 
     edit: false, // default editing mode 
    }; 

    // bind your component methods 
    this.renderEdit = this.renderEdit.bind(this); 
    this.changeLabel = this.changeLabel.bind(this); 
    this.renderLabel = this.renderLabel.bind(this); 
    this.changeEdit = this.changeEdit.bind(this); 
    } 

    /* 
    * render a form, that changes the label 
    * change the editing mode, when submitting 
    */ 
    renderEdit() { 
    return (
     <form onSubmit={this.changeEdit(false)}> 
     <input 
      type="text" 
      value={this.state.label} 
      onChange={this.changeLabel} 
     /> 
     </form> 
    ); 
    } 

    changeLabel(e) { 
    this.setState({ label: e.target.value }); // change label 
    } 

    renderLabel() { 
    return (
     <a 
     class="nav-link" 
     data-toggle="tab" 
     href="#NewTab4" 
     aria-expanded="false" 
     onDoubleClick={this.changeEdit(true)} 
     > 
     {this.state.label} 
     </a> 
    ); 
    } 

    /* 
    * return a function for your events, that changes the editing mode 
    */ 
    changeEdit(edit) { 
    return e => { 
     e.preventDefault(); 

     this.setState({ edit }); 
    }.bind(this); 
    } 

    render() { 
    return state.state.edit ? this.renderEdit() : this.renderLabel(); 
    } 
} 

Answer 2

你需要做這樣的事情。

<a class="nav-link" onDoubleClick={this.toggleName.bind(this)} data-toggle="tab" href="#NewTab4" aria-expanded="false">{this.state.tabName}</a> 


    componentWillMount(){ 
    this.setState({tabName:'My Link'}) // Initial value of tab 
    } 
    toggleName(){ 
     this.setState({tabName:'Your Link'})//Value after double click on tab 
    }