2016-12-22 19 views
-2

私はあなたの助けが必要です。
私は、リンクにこの私のReactjsプロジェクトがあります。私は、このリンクをクリックすると、私は「マイリンク」(「あなたのリンク」となります)を編集することができます倍増したいreactjsのリンクの内容を編集

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

を。
次にEnterキーを押します。「マイリンク」は「あなたのリンク」になります。

ありがとうございます。申し訳ありませんが、私の悪い英語です。

+0

あなたの質問は私には分かりません – Ved

答えて

0

ラベルはコンポーネントの状態の中に格納する必要があります。イベントが発生した場合は、ラベルを変更することができます。

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

このような処理が必要です。

<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 
    } 
関連する問題