Как я могу правильно изменить заголовок реагировать на загрузку DropdownButton при нажатии? - PullRequest
Новая
       39

Как я могу правильно изменить заголовок реагировать на загрузку DropdownButton при нажатии?

0 голосов
/ 31 мая 2019

Я пытаюсь изменить отображаемый текст / заголовок в 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;

Ответы [ 2 ]

0 голосов
/ 31 мая 2019

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

<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 голосов
/ 31 мая 2019

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

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
  });
};

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

...