当使用 vanilla mdl ( <script src="material.js"
> ) 或使用 react-mdl
时,如果我添加 mdl-js-ripple-effect
mdl 类(或带有 react-mdl
的 ripple 属性)到一个按钮, event.target.value
按钮元素变为未定义(事件处理程序正在修改 react 中的状态)。没有涟漪效应,它工作得很好。除了不使用涟漪效应,我找不到其他解决方案;但这使按钮非常无聊。将 react 与 mdl 一起使用似乎存在问题,但我认为有人可能知道更多......(我正在使用 create-react-app
)
点击处理程序:
handleButtonClick(event){
event.preventDefault();
this.setState({input: this.state.input + event.target.value});
}
使用 react-mdl
的“关键”React 组件:
function Key (props) {
return(
<Button raised colored ripple
value={props.value}
onClick={props.handleButtonClick}>
{props.value}
</Button>
);
}
如果我将 vanilla mdl 与 button
一起使用,也会出现同样的问题。元素:
function Key (props) {
return(
<button className="mdl-button mdl-js-button mdl-button--raised
mdl-js-ripple-effect mdl-button--colored"
value={props.value}
onClick={props.handleButtonClick}>
{props.value}
</button>
);
}
如果我移除 纹波,则 event.target.value
单击按钮时应该是 ( value={props.value}
)。但是有了波纹,它是未定义的。
有没有人遇到过这种情况,或者知道为什么会发生这种情况,或者有解决方法?
最佳答案
mdl-js-ripple-effect
类用样式化的 span
元素替换 button
元素,删除它的 value
属性。
您可以通过 this.props.value
访问 value
属性。
这是一个 jsFiddle显示 event.target.value
与 this.props.value
的值。
关于javascript - mdl-js-ripple-effect 导致 event.target.value 在 React 组件中变为未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41604129/