Menu
I'm implementing Material Design with Material-Design-lite in a React app. When I'm using TextField w/Floating Label within my top component, it works. But on a component called by by top component, it doesn't. TextField w/Floating Label then acts a regular input field.
I noticed that outer TextField gets a class named "is-upgraded", but inner TextField doesn't.
app 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>
720
MDL enhances normal DOM elements by upgrading them to MDL components. In case of non-dynamic elements (i.e. everything that is already in DOM tree upon window.load), MDL automatically upgrades them upon window.load to MDL components. For everything else you have to use componentHandler to upgrade your elements manually. There as an article here which explains how to integrate React with MDL:
Integrating MDL with React is as easy as calling a single method:
componentHandler.upgradeDom();. In my opinion, the best place to put this code is in thecomponentDidUpdatecallback, which is invoked just after and element has been updated and successfully rendered. This way we can make sure that our React component already exists in the DOM and can be upgraded by thecomponentHandler.
So you would 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 aforementioned article!
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
