引导拆分按钮下拉项值未定义答案

【问题标题】：bootstrap split button dropdown item value undefined引导拆分按钮下拉项值未定义
【发布时间】：2020-03-04 00:43:31
【问题描述】：

我不习惯在反应引导程序中使用拆分按钮值，但我只是想用拆分按钮的值更新我的反应状态，但值总是返回未定义...不知道我在做什么错误的？我已经为我的所有下拉项设置了 value 属性。

handleChange=(e)=>{
    this.setState({[e.name]: e.target.value})
    console.log(e.target.value)
}

<SplitButton className="dropdownItem" variant='Secondary' title='step pattern'>
      <Dropdown.Item onClick={this.handleChange} name='stepPattern'  eventKey="1" value='step' ><img className="patterns" alt="a stepped gradient" src={step}></img></Dropdown.Item>
      <Dropdown.Divider />
      <Dropdown.Item onClick={this.handleChange} name='stepPattern' eventKey="2" value='wave' ><img className="patterns" alt="a wavy gradient" src={wave}></img></Dropdown.Item>
       <Dropdown.Divider />
       <Dropdown.Item onClick={this.handleChange} name='stepPattern'  eventKey="3" value='curve' ><img className="patterns" alt="an upward sloped gradient" src={curve}></img></Dropdown.Item>     
       </SplitButton>

【问题讨论】：

标签： reactjs react-bootstrap react-state

【解决方案1】：

如果您使用的是 handleChange（我建议），您可以通过以下方式进行更改：

handleChange = value => {
    this.setState({ stepPattern: value });
    console.log(value);
}

通过这样做，现在您只需要 Dropdown.Item 即可调用 handleChange 函数。请尝试以下操作：

  render() {
    return (
      <SplitButton className="dropdownItem" variant='secondary' title='step pattern' >
        <Dropdown.Item onClick={() => { this.handleChange(1); }} eventKey="1" value='step' ><img className="patterns" alt="a stepped gradient" src={step}></img></Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item onClick={() => { this.handleChange(2); }} eventKey="2" value='wave' ><img className="patterns" alt="a wavy gradient" src={wave}></img></Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item onClick={() => { this.handleChange(3); }} eventKey="3" value='curve' ><img className="patterns" alt="an upward sloped gradient" src={curve}></img></Dropdown.Item>
      </SplitButton >
    );
  }

现在每个按钮都在调用具有预定义值的函数，可以在常量中取出。

【讨论】：