React-bootstrap onSelect 方法

Question

我正在使用 react-bootstrap DropdownButton，我想做的是，

当我点击其中一个 MenuItem 时，

onSelect 将运行一个名为 fltrPick() 的函数正在设置新状态 setState({fltr:"some string"})

我这样绑定 fltrPick() let pickHeaderSet = fltrPick.bind(this)

并且当我加载页面时，按钮甚至出现了

这是我的代码

     fltrFunc:function(name){
       function fltrPick(pick){
          this.setState({fltrName:pick})
        }
        let pickHeaderSet = fltrPick.bind(this)
        switch(name){
           case "processors":
             return (
              <DropdownButton id="dropdownBtn" bsSize="xsmall"  title={name} >
               <MenuItem eventKey="1" onSelect={pickHeaderSet("pentium")} >pentium </MenuItem>  
              //the one above make the problam why ? 
               <MenuItem eventKey="2">i3</MenuItem>
               <MenuItem eventKey="3">i7</MenuItem> 
              </DropdownButton>
                    )
             braek;
                   }
      },

Answer 1

在构造函数中你应该这样绑定它

this.fltrPick = this.fltrPick.bind(this);

参考：https://facebook.github.io/react/docs/handling-events.html

Answer 2

我知道你在渲染器上调用那个函数？

您的代码应如下所示：

constructor(props) {
    super(props);

    this.fltrFunc = this.fltrFunc.bind(this);
  }

        fltrFunc(name) {
        this.setState({ filterName: name });
        switch (name) {
          case 'processors': {
            return (
              <DropdownButton id="dropdownBtn" bsSize="xsmall"  title={name} >
                <MenuItem eventKey="1" onSelect={() => this.pickHeaderSet("pentium")}>pentium</MenuItem>  
                <MenuItem eventKey="2">i3</MenuItem>
                <MenuItem eventKey="3">i7</MenuItem> 
              </DropdownButton>
            );
          }
          default:
        }
      }

        render() {
            return ({this.fltrFunc()});
       }

React-bootstrap onSelect 方法

React-bootstrap onSelect method

javascript

reactjs

react-bootstrap