CODEWITHSUNDEEP
javascriptreactjsmaterial-design-litedom-eventscreate-react-app
Benjamin H Boruff
Benjamin H Boruff

Reputation: 2979

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

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?

Upvotes: 2

Views: 288

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62871

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.

Upvotes: 1

Related Questions