Итак, у меня есть MDC, наконец, работающий с React, и с помощью документов Google я понял, что мне нужно, чтобы reactjs запускал следующий JS, когда пользователь нажимает на поле ввода - в основном метка должна перемещаться над вводом, чтобы пользователь мог ввести - как моя демонстрация на чистом HTML/JS https://codepen.io/russellharrower/pen/oeReEN
Однако с помощью 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);
}
})();
полный код 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;
Последнее обновление Я добавил эти две функции, однако по какой-то причине (function(){})(); script, пока он будет делать предупреждение и т. д., он не позволит текстовой метке перемещаться, как в демонстрации 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);
};