javascript - How can I properly change the title of react-bootstrap DropdownButton on click? - Stack Overflow

admin管理员组

文章数量:1415145

I am trying to change the displayed text/title in the DropdownButton upon clicking on a Dropdown.Item.

I've tried to pass various parameters into the changeValue method/function but to no solution as of yet. Using this approach, text the parameter in the function appears to be empty. Therefore the state property, dropDownValue is being empty, thus leaving me with no title in the drop down after click on an item.

import React from 'react';
import './App.css';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      dropDownValue: "Select an item"
    }
  }

  changeValue(text) {
    this.setState({dropDownValue: text})
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
        </header>
        <div>
        <DropdownButton id="dropdown-item-button" title={this.state.dropDownValue} className="format"> 
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #1</div></Dropdown.Item>
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #2</div></Dropdown.Item>
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #3</div></Dropdown.Item>
        </DropdownButton>
        </div>
      </div>
    );
  }
}

export default App;

I am trying to change the displayed text/title in the DropdownButton upon clicking on a Dropdown.Item.

I've tried to pass various parameters into the changeValue method/function but to no solution as of yet. Using this approach, text the parameter in the function appears to be empty. Therefore the state property, dropDownValue is being empty, thus leaving me with no title in the drop down after click on an item.

import React from 'react';
import './App.css';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      dropDownValue: "Select an item"
    }
  }

  changeValue(text) {
    this.setState({dropDownValue: text})
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
        </header>
        <div>
        <DropdownButton id="dropdown-item-button" title={this.state.dropDownValue} className="format"> 
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #1</div></Dropdown.Item>
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #2</div></Dropdown.Item>
          <Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #3</div></Dropdown.Item>
        </DropdownButton>
        </div>
      </div>
    );
  }
}

export default App;

• javascript
• reactjs
• drop-down-menu
• react-bootstrap

Share Improve this question Follow asked May 31, 2019 at 3:15 MisterTamsMisterTams 9522 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Just change this,

<Dropdown.Item as="button"><div onClick={() => this.changeValue(this.textContent)}>Item #1</div></Dropdown.Item>

with this,

<Dropdown.Item as="button"><div onClick={(e) => this.changeValue(e.target.textContent)}>Item #1</div></Dropdown.Item>

I just did this and it worked for me

<Dropdown.Item onClick={() => this.changeValue(e)}> Title </Dropdown.Item>

本文标签： javascriptHow can I properly change the title of reactbootstrap DropdownButton on clickStack Overflow