[英]Material Design Component & reactjs input fields
So i have MDC finially working with React and using the Google docs I have worked out that I some how need reactjs to run the following JS when a user clicks on an input field - basiclly the label should move above the input so the user can type - like my pure HTML / JS demo https://codepen.io/russellharrower/pen/oeReEN 所以我让MDC最终与React一起工作,并使用Google文档,我得出了一些结论:当用户单击输入字段时,我如何需要reactjs来运行以下JS-基本上,标签应移至输入上方,以便用户可以输入-就像我的纯HTML / JS演示https://codepen.io/russellharrower/pen/oeReEN
However with reactjs I noticed I can't put the code below in the render area, so i am wondering where would I place it and how? 但是,使用reactjs时,我注意到无法将代码放在渲染区域中,因此我想知道将其放置在哪里以及如何放置?
(function() {
var tfs = document.querySelectorAll(
'.mdc-textfield:not([data-demo-no-auto-js])'
);
for (var i = 0, tf; tf = tfs[i]; i++) {
mdc.textfield.MDCTextfield.attachTo(tf);
}
})();
full reactjs code updated 完整的reactjs代码已更新
import React, { Component } from 'react';
import './App.css';
import * as mdc from 'material-components-web';
class App extends Component {
hrefjs(l){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = l; // use this for linked script
document.body.appendChild(script);
}
componentWillMount() {
this.hrefjs("//unpkg.com/material-components-web@latest/dist/material-components-web.min.js");
var texst ="(function(){var tfs = document.querySelectorAll('.mdc-textfield:not([data-demo-no-auto-js])'); for (var i = 0, tf; tf = tfs[i]; i++) {mdc.textfield.MDCTextfield.attachTo(tf); mdc.autoInit();}})();"
const script = document.createElement("script");
script.text=texst;
document.body.appendChild(script);
};
render() {
return (
<div className="App">
<header className="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall">
<div className="mdc-toolbar__row">
<section className="mdc-toolbar__section mdc-toolbar__section--align-start">
<span className="mdc-toolbar__title">Title</span>
</section>
</div>
</header>
<main className="demo-main mdc-toolbar-fixed-adjust">
<div className="mdc-form-field">
<div className="mdc-checkbox">
<input type="checkbox"
id="my-checkbox"
className="mdc-checkbox__native-control"/>
<div className="mdc-checkbox__background">
<svg className="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path className="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div className="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label htmlhtmlhtmlFor="my-checkbox" id="my-checkbox-label">This is my checkbox</label>
</div>
<section className="example">
<div className="mdc-textfield">
<input type="text" id="username" className="mdc-textfield__input" aria-controls="username-helptext"/>
<label htmlFor="username" className="mdc-textfield__label">Username</label>
</div>
<p id="username-helptext" className="mdc-textfield-helptext" aria-hidden="true">
This will be displayed on your public profile
</p>
</section>
</main>
<script>
mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar'));
//mdc.textfield.MDCToolbar.attachTo(document.querySelector('.mdc-textfield'));
//mdc.autoInit();
</script>
</div>
);
}
}
export default App;
Latest update I have added these two functions in however for some reason the (function(){})(); 最新更新中 ,由于某种原因,我添加了这两个函数。(function(){})(); script while it will do an alert etc. it will not allow the text label to move like the codepen.io demo
脚本,但它会发出警报等。它不允许文本标签像codepen.io演示一样移动
hrefjs(l){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = l; // use this for linked script
document.body.appendChild(script);
}
componentWillMount() {
this.hrefjs("//unpkg.com/material-components-web@latest/dist/material-components-web.min.js");
var texst ="(function(){var tfs = document.querySelectorAll('.mdc-textfield:not([data-demo-no-auto-js])'); for (var i = 0, tf; tf = tfs[i]; i++) {mdc.textfield.MDCTextfield.attachTo(tf); mdc.autoInit();}})();"
const script = document.createElement("script");
script.text=texst;
document.body.appendChild(script);
};
Even if your approach works in the end somehow. 即使您的方法最终以某种方式起作用。 It does really not look like a very pleasant way to continue developing and your code will be a nightmare for others to read later on (or yourself).
看起来这确实不是继续开发的一种令人愉快的方式,并且您的代码将成为其他人(或您自己)以后阅读的噩梦。 It can actually be done much easier.
实际上可以轻松得多。 I am usually writing react.js wrappers for the components I need from MDC.
我通常在为MDC中需要的组件编写react.js包装器。 Here is an example for the textfield:
这是文本字段的示例:
import React from 'react';
import { MDCRipple } from '@material/ripple/dist/mdc.ripple';
class MdcButton extends React.Component {
constructor(props) {
super(props);
// Init state
this.state = {}
}
componentDidMount() {
if (this.props.ripple)
MDCRipple.attachTo(this.refs.button);
}
static defaultProps = {
ripple: true,
raised: true,
disabled: false,
className: "",
type: "submit"
}
render() {
let className = "mdc-button " + this.props.className;
if (this.props.raised)
className += " mdc-button--raised";
return (
<button
ref="button"
id={this.props.id}
className={className}
type={this.props.type}
onClick={this.props.onClick}
disabled={this.props.disabled}
>
{this.props.children}
</button>
);
}
}
export default MdcButton
You can check out the official mdc demo for react.js here ( https://github.com/material-components/material-components-web/tree/master/framework-examples/react ). 您可以在此处( https://github.com/material-components/material-components-web/tree/master/framework-examples/react )查看官方的mdc演示react.js。
For styling, I am including the mdc sccs files into my scss files and change the values I need. 对于样式,我将mdc sccs文件包括到我的scss文件中并更改所需的值。 eg:
例如:
$mdc-theme-primary: #404040;
$mdc-theme-accent: #a349a3;
$mdc-theme-background: #fff;
@import "@material/ripple/mdc-ripple";
@import "@material/typography/mdc-typography";
@import "@material/theme/mdc-theme";
@import "@material/button/mdc-button";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.