Редактирование содержания ссылки в reactjs

Question

Мне нужна ваша помощь.
У меня есть ссылка это мой проект Reactjs:

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

Я хочу дважды щелкнуть по этой ссылке, и я могу изменить "My Link" (становится "Ваша ссылка").
Затем я нажимаю Enter на клавиатуре, «My Link» становится «Your Link».

спасибо. Извините, мой плохой английский.

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 
    }