javascript - Show or hide element -

-

i messing around react.js first time , cannot find way show or hide on page via click event. not loading other library page, looking native way using react library. have far. show results div when click event fires. 

var search= react.createclass({     handleclick: function (event) {         console.log(this.prop);     },     render: function () {         return (             <div classname="date-range">                 <input type="submit" value="search" onclick={this.handleclick} />             </div>         );     } });  var results = react.createclass({     render: function () {         return (             <div id="results" classname="search-results">                 results             </div>         );     } });  react.rendercomponent(<search /> , document.body);

the key update state of component in click handler using setstate. when state changes applied, render method gets called again new state:

var search = react.createclass({     getinitialstate: function() {         return { showresults: false };     },     onclick: function() {         this.setstate({ showresults: true });     },     render: function() {         return (             <div>                 <input type="submit" value="search" onclick={this.onclick} />                 { this.state.showresults ? <results /> : null }             </div>         );     } });  var results = react.createclass({     render: function() {         return (             <div id="results" classname="search-results">                 results             </div>         );     } });  reactdom.render(<search />, document.getelementbyid('container'));

http://jsfiddle.net/kb3gn/15084/


Comments

Post a Comment

Popular posts from this blog

qml - Is it possible to implement SystemTrayIcon functionality in Qt Quick application -

-
i writing qtquick desktop application. use both c++ (for functionality) , qml (for ui) in it. use qquickview show interface written in qml. i want application reside in system tray when minimised. i mean functionality similar example. http://qt-project.org/doc/qt-4.8/desktop-systray.html . trying implement feature not find way in qt quick application. here main.cpp code: #include <qguiapplication> #include <qqmlengine> #include <qqmlcontext> #include <qqmlfileselector> #include <qquickview> #include "myapp.h" int main(int argc, char* argv[]) { qguiapplication app(argc,argv); app.setapplicationname(qfileinfo(app.applicationfilepath()).basename()); qdir::setcurrent(qapp->applicationdirpath()); myapp myappobject; qquickview view; view.connect(view.engine(), signal(quit()), &app, slot(quit())); view.rootcontext()->setcontextproperty("myappobject", &myappobject); new qqmlfilese...
Read more

double exclamation marks in haskell -

-
i have code: ghci>let listoffuns = map (*) [0..] ghci>(listoffuns !! 4) 5 20 what !! mean? i saw example double exclamation this: ghci> [1,2,3,4]!!1 ghci> 2 but seems don't apply question example. how understand function. need explanations. !! indexes lists. takes list , index, , returns item @ index. if index out of bounds, returns ⊥.
Read more

javascript - How to get D3 Tree link text to transition smoothly? -

-
visualization goal: build d3 tree has text at, both, nodes , links, , transitions cleanly, when nodes selected/deselected. problem: while can link text, called "predicates," show along centroid of link paths, can't seem them transition in , out "smoothly." question: can please me please me clean code , better understand how tree "link" transitions behaving understand theory behind code? visualization , source location: http://bl.ocks.org/guerino1/raw/ed80661daf8e5fa89b85/ the existing code looks follows... var linktextitems = vis.selectall("g.linktext") .data(tree.links(nodes), function(d) { return d.target.id; }) var linktextenter = linktextitems.enter().append("svg:g") .attr("class", "linktext") .attr("transform", function(d) { return "translate(" + (d.target.y + 20) + "," + (getcenterx(d)) + ")"; }); // add predicate text each link path li...
Read more