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

Question

When using vanilla mdl ( <script src="material.js" > ) or using react-mdl , if I add the mdl-js-ripple-effect mdl class (or the ripple attribute with react-mdl ) to a button, the event.target.value of the button element becomes undefined (the event handler is modifying state in react). Without the ripple effect, it works just fine. I can't find a solution other than not using the ripple effect; but that makes the button very boring. There seem to be issues with using react with mdl, but I thought someone might know more... (I'm using create-react-app )

The click handler:

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

The "Key" React component using react-mdl :

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

The same issue occurs if I use vanilla mdl with a button element:

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>
    );
}

If I remove the ripple, then event.target.value is what it should be ( value={props.value} ) when the button is clicked. But with the ripple, it is undefined.

Anyone experienced this, or have an idea of why this is happening, or a work-around?

Answer 1

The mdl-js-ripple-effect class replaces the button element with a styled span element, removing it's value attribute.

You can access the value attribute via this.props.value instead.

Here's a jsFiddle showing the values of event.target.value vs this.props.value .