2

使用 vanilla mdl ( <script src="material.js"> ) 或 usingreact-mdl时，如果我将mdl-js-ripple-effectmdl 类（或带有 的波纹属性react-mdl）添加到按钮，event.target.value则按钮元素的 变为未定义（事件处理程序正在修改反应中的状态）。没有涟漪效应，它工作得很好。除了不使用涟漪效应外，我找不到解决方案；但这使按钮很无聊。与 mdl 一起使用 react 似乎存在问题，但我认为有人可能知道更多......（我正在使用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>
    );
}

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}但随着涟漪，它是未定义的。

任何人都经历过这种情况，或者知道为什么会发生这种情况，或者解决方法？

4

1 回答 1

1

该类用样式元素mdl-js-ripple-effect替换元素，删除它的属性。buttonspanvalue

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

这是一个显示vs值的jsFiddle。event.target.valuethis.props.value

于 2017-01-23T13:17:26.170 回答