Question

我试图在单击Dropdown.Item时更改DropdownButton中显示的文本/标题。

我试图将各种参数传递给changeValue方法/函数，但到目前为止还没有解决方案。使用这种方法， text 函数中的参数似乎为空。因此，状态属性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;

Answer 1

只需更改此

<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>

Answer 2

我只是这样做，它对我有用

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

Answer 3

我没有使用react-bootstrap的经验，但是想法应该是相同的。首先，您确定自己的状态。

df=pd.DataFrame(Input_data)
notes=[];temp=[];flag='';value='';c=0;chk_star='yes'
for i,row in df.iterrows():
    row[0]=str(row[0])
    if '*' in row[0].strip()[:5] and chk_star=='yes':   
        value=row[0].strip()
        temp=temp+[value]
        value=''
        continue

    if '(' in row[0].strip()[:5]:
        chk_star='no'
        temp=temp+[value]
        value='';c=0
        flag='continue'
        value=row[0].strip()
    if flag=='continue' and '(' not in row[0][:5] : 
        value=value+row[0]
        c=c+1
    if c>4:
        temp=temp+[value] 
        print "111",value,temp
        break
if '' in temp:
    temp.remove('')
df=pd.DataFrame({'notes':temp})

然后您将输入字段。...注意值（{this.state.value1}）。然后调用您的函数以检测何时进行了更改。

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

在输入发生任何更改时获取您的值，并将其设置为您的状态。

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

然后使用您的更新状态显示任何信息，提交表格等...

如何在单击时正确更改react-bootstrap DropdownButton的标题？

3 个答案: