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

使用香草mdl（>）或使用<script src="material.js"时，如果我将react-mdl mdl类（或带有mdl-js-ripple-effect的ripple属性）添加到按钮，则按钮元素的react-mdl变为未定义（事件处理程序正在修改状态以进行响应）。没有涟漪效应，效果很好。除了不使用波纹效果外，我找不到其他解决方案。但这会使按钮很无聊。在mdl中使用react似乎存在问题，但我认为可能有人知道更多...（我正在使用event.target.value）

点击处理程序：

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

使用create-react-app的“关键” React组件：

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

如果我将香草mdl与react-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>
    );
}

如果消除了波纹，则单击按钮时button应该是（event.target.value）。但是随着涟漪，它是不确定的。

任何人都经历过这种情况，或者对为什么会发生这种情况有想法，或者可以解决？

最佳答案

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

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

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

关于javascript - mdl-js-ripple-effect导致event.target.value在React组件中变得未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41604129/