reactjs - 引导拆分按钮下拉项值未定义
问题描述
我不习惯在反应引导程序中使用拆分按钮值,但我只是想用拆分按钮的值更新我的反应状态,但该值总是返回未定义......不知道我做错了什么?我已经为我的所有下拉项目设置了一个 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>
解决方案
如果您使用的是 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 >
);
}
现在每个按钮都在调用具有预定义值的函数,可以在常量中取出。
推荐阅读
- vbscript - Outlook VBScript 签名更改颜色和字体无换行符
- installation - 如何在kali linux上安装hyperion 2.2
- arrays - 在 postgresql 中更新多维数组
- python - 检索张量中 1 的位置或将张量拆分为 1
- html - 如何使用 HTML 将 CSS 中的 DIV 元素居中?
- python - Graph 执行中不允许使用 `tf.Tensor` 作为 Python `bool`。使用 Eager 执行或用 @tf.function 修饰这个函数
- django - DRF 所需的搜索过滤器
- html - 图像的最大宽度在 IE 11 的 flexbox 中不起作用,但适用于谷歌浏览器
- javascript - 我无法在 if 语句中分配变量
- r - 将 ggplot 中的 x 轴设置为在最后一个日期数据结束时可用于