Question

我需要你的帮助。
我的Reactjs项目有一个链接：

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

我想双击此链接，我可以编辑＆＃34;我的链接＆＃34; （成为＆＃34;你的链接＆＃34;）。
然后我按下Enter键盘，＆＃34; My Link＆＃34;成为＆＃34;你的链接＆＃34;。

谢谢。对不起我的英语不好。

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
    }

编辑reactjs中链接的内容

2 个答案: