Я пытаюсь изменить отображаемый текст / заголовок в DropdownButton после нажатия на Dropdown.Item.

Я пытался передать различные параметры в метод / функцию changeValue, но пока не нашел решения. При таком подходе текст параметр в функции представляется пустым. Поэтому свойство состояния dropDownValue становится пустым, в результате чего после щелчка по элементу у меня не остается заголовка в раскрывающемся списке.

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;
0
MisterTams 31 Май 2019 в 06:15

2 ответа

Лучший ответ

Просто измени это,

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

С этим,

<Dropdown.Item as="button"><div onClick={(e) => this.changeValue(e.target.textContent)}>Item #1</div></Dropdown.Item>
0
ravibagul91 31 Май 2019 в 04:36

У меня нет никакого опыта в реакции-начальной загрузке, но идея должна быть такой же. Сначала вы определяете свое состояние.

state = {
        value1: '',
        value2: ''
    };

Тогда у вас есть поля ввода .... обратите внимание на значение ({this.state.value1}). Затем вызов вашей функции для определения момента внесения изменений.

<input
  name="value1"
  value={this.state.value1}
  onChange={e => this.onChange(e)}  
/>
<input
  name="value2"
  value={this.state.value2}
  onChange={e => this.onChange(e)}
/>

Получите ваши значения, когда на входе есть какие-либо изменения, и установите это в ваше состояние.

onChange = (e) => {
 const { name, value } = e.target;
 this.setState({
 [name]: value
  });
};

Затем используйте обновленное состояние для отображения любой информации, отправки формы и т. Д.

-1
tim 31 Май 2019 в 04:31
56388220