What does the class "updated" in man-design-lite do and how is it installed?
I am using Material Design with Material-Design-lite in a React app. When I use a floating label TextField in my top component, it works. But on a component called the top component, this is not the case. TextField w / Floating Label then executes a regular input field.
I noticed that the outer TextField gets a class named "updated", but the inner TextField does not.
application structure
app.js products.js myTest.js (doesn't work) myTest.js (works)
App.jsx
export default class App extends React.Component {
render() {
return(
<div>
<Products/>
<MyTest id="products" type="text"/>
</div>
)
}
}
Products.jsx
export default class Products extends React.Component {
render() {
return(
<div>
<List items={this.state.products}/>
<MyTest id="products" type="text"/>
<AddProduct/>
</div>
)
}
}
myTest.jsx
import React from "react";
export default class MyTest extends React.Component {
constructor(props) {
super(props)
}
render() {
return(
<div>
<div className="mdl-textfield
mdl-js-textfield
mdl-textfield--floating-label">
<input
className="mdl-textfield__input"
id={this.props.id}
type={this.props.type}/>
<label
className="mdl-textfield__label"
htmlFor={this.props.id}>
Test
</label>
</div>
</div>
)
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<base href="/">
<link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"> </script>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
source to share
MDL enhances normal DOM elements by updating them to MDL components. In the case of non-dynamic elements (i.e. everything that is already in the DOM tree at window.load
), MDL automatically updates them when window.load
MDL components are present. For everything else you need to use componentHandler
to manually update your items. Here's like an article here that explains how to integrate React with MDL:
Integration with MDL React is as simple as calling a single method:
componentHandler.upgradeDom();
. In my opinion, the best place to put this code is in a callbackcomponentDidUpdate
that is only called after the element has been updated and rendered successfully. From here we can ensure that our React component already exists in the DOM and can be updated withcomponentHandler
.
So, you will have something like this:
var TestButton = React.createClass({
render: function() {
return (
<button ref="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
Submit
</button>
);
},
componentDidUpdate: function() {
// This upgrades all upgradable components (i.e. with 'mdl-js-*' class)
componentHandler.upgradeDom();
// We could have done this manually for each component
/*
* var submitButton = this.refs.submit.getDOMNode();
* componentHandler.upgradeElement(submitButton, "MaterialButton");
* componentHandler.upgradeElement(submitButton, "MaterialRipple");
*/
}
});
Disclaimer: I am the author of the above article!
source to share