bootstrap значение элемента раскрывающегося списка для кнопки разделения не определено

Question

Я не привык играть со значениями кнопки разделения в реакции bootstrap, но я просто пытаюсь обновить свое состояние реакции значением кнопки разделения, но значение всегда возвращает неопределенное значение ... Не уверен, что я ' я делаю неправильно? У меня уже есть свойство 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> 

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

Теперь каждая из кнопок вызывает функцию с предопределенным значением, которое можно вывести в константу.