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

2 个答案: