reactjs에서 링크 내용 편집

Question

당신의 도움이 필요합니다.

나는이 링크를 클릭 내가 "내 링크"를 편집 할 수 두 배로 할

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

는 ("당신의 링크"가됩니다) :
내가 링크이 내 Reactjs 프로젝트가 있습니다.
그런 다음 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 
    }