Question

使用vanilla mdl（<script src="material.js"＆gt;）或使用react-mdl时，如果我将mdl-js-ripple-effect mdl类（或带有react-mdl的ripple属性）添加到按钮，button元素的event.target.value变为未定义（事件处理程序正在修改状态）。没有涟漪效应，它可以正常工作。我使用涟漪效应找不到不以外的解决方案;但这使按钮非常无聊。使用mdl的反应似乎有问题，但我认为有人可能会知道更多...（我使用create-react-app）

点击处理程序：

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

＆＃34; Key＆＃34;使用react-mdl：

反应组件

function Key (props) {
    return(
      <Button raised colored ripple
        value={props.value}
        onClick={props.handleButtonClick}>
        {props.value}
      </Button>
    );
}

如果我使用带有button元素的vanilla mdl，则会出现同样的问题：

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类用样式化的button元素替换span元素，删除它的value属性。

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

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

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

1 个答案: