mdl-js-ripple-effect 导致 event.target.value 在 React 组件中变为未定义

Question

当使用 vanilla mdl (<script src="material.js"> ) 或使用 react-mdl 时，如果我添加 mdl-js-ripple-effect mdl class（或带 [=15= 的 ripple 属性]) 到按钮，按钮元素的 event.target.value 变为未定义（事件处理程序正在修改反应中的状态）。没有涟漪效应，它工作得很好。除了使用涟漪效应 not 之外，我找不到其他解决方案；但这使按钮非常无聊。使用 mdl 反应似乎有问题，但我认为有人可能知道更多......（我正在使用 create-react-app）

点击处理程序：

  handleButtonClick(event){
    event.preventDefault();
    this.setState({input: this.state.input + event.target.value});
  }

"Key" React 组件使用 react-mdl:

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}）按钮被点击。但是和的波纹，是未定义的。

有没有人遇到过这种情况，或者知道为什么会发生这种情况，或者有解决方法？

Answer 1

mdl-js-ripple-effect class 将 button 元素替换为带样式的 span 元素，并移除其 value 属性。

您可以改为通过 this.props.value 访问 value 属性。

这是一个 jsFiddle，显示了 event.target.value 与 this.props.value 的值。

mdl-js-ripple-effect 导致 event.target.value 在 React 组件中变为未定义

mdl-js-ripple-effect causes event.target.value to become undefined in a React component

javascript

dom-events

reactjs

material-design-lite

create-react-app