Skip to content

Instantly share code, notes, and snippets.

@allenyang79

allenyang79/index.html

Forked from anonymous/index.html
Last active August 29, 2015 14:24
Show Gist options
  • Save allenyang79/02d45b51a6f98bb120b9 to your computer and use it in GitHub Desktop.
Save allenyang79/02d45b51a6f98bb120b9 to your computer and use it in GitHub Desktop.
Download ZIP
用refs 屬性去找到 對應的element-component
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-with-addons-0.13.1.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Hello
<div id="main"></div>
<script id="jsbin-javascript">
var App = React.createClass({displayName: 'App',
getDefaultProps:function(){
return {
txt: "this is a cat"
}
},
getInitialState:function(){
return {
red:0,
green:0,
blue:0
}
},
onChange:function(e){
console.log(["red",this.refs.red.props.id]);
this.setState({
red: this.refs.red.refs.inp.getDOMNode().value,
green: this.refs.green.refs.inp.getDOMNode().value,
blue: this.refs.blue.refs.inp.getDOMNode().value
});
//this.props.txt = this.state.txt + "-" +this.state.count;
},
render:function(){
var txt = this.props.txt;
var cat = this.props.cat;
return (
React.createElement("div", null,
React.createElement("div", null,
React.createElement("div", null, txt),
React.createElement("div", null, cat),
React.createElement("div", null,
React.createElement("input", {type: "text", onChange: this.onChange, value: this.state.txt}),
React.createElement("br", null),
React.createElement("div", null,
this.state.red, ",",
this.state.green, ",",
this.state.blue
),
React.createElement(Slider, {ref: "red", update: this.onChange, id: "this-is-red"}),
this.state.red, " ", React.createElement("br", null),
React.createElement(Slider, {ref: "green", update: this.onChange}),
this.state.green, " ", React.createElement("br", null),
React.createElement(Slider, {ref: "blue", update: this.onChange}),
this.state.blue, " ", React.createElement("br", null)
)
),
"Test"
)
)
}
});
var Slider = React.createClass({displayName: 'Slider',
render: function(){
return (
React.createElement("div", null,
React.createElement("input", {ref: "inp", type: "range", min: "0", max: "255", onChange: this.props.update}),
React.createElement("hr", null)
)
);
}
})
React.render(React.createElement(App, {txt: "myboss myhero", cat: 4}),document.body);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.13.1.js"><\/script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Hello
<div id="main"></div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var App = React.createClass({
getDefaultProps:function(){
return {
txt: "this is a cat"
}
},
getInitialState:function(){
return {
red:0,
green:0,
blue:0
}
},
onChange:function(e){
console.log(["red",this.refs.red.props.id]);
this.setState({
red: this.refs.red.refs.inp.getDOMNode().value,
green: this.refs.green.refs.inp.getDOMNode().value,
blue: this.refs.blue.refs.inp.getDOMNode().value
});
//this.props.txt = this.state.txt + "-" +this.state.count;
},
render:function(){
var txt = this.props.txt;
var cat = this.props.cat;
return (
<div>
<div>
<div>{txt}</div>
<div>{cat}</div>
<div>
<input type="text" onChange={this.onChange} value={this.state.txt}></input>
<br/>
<div>
{this.state.red},
{this.state.green},
{this.state.blue}
</div>
<Slider ref="red" update={this.onChange} id="this-is-red"/>
{this.state.red} <br/>
<Slider ref="green" update={this.onChange} />
{this.state.green} <br/>
<Slider ref="blue" update={this.onChange} />
{this.state.blue} <br/>
</div>
</div>
Test
</div>
)
}
});
var Slider = React.createClass({
render: function(){
return (
<div>
<input ref="inp" type="range" min="0" max="255" onChange={this.props.update}/>
<hr/>
</div>
);
}
})
React.render(<App txt="myboss myhero" cat={4}></App>,document.body);
</script></body>
</html>
Raw
jsbin.vizula.js
var App = React.createClass({displayName: 'App',
getDefaultProps:function(){
return {
txt: "this is a cat"
}
},
getInitialState:function(){
return {
red:0,
green:0,
blue:0
}
},
onChange:function(e){
console.log(["red",this.refs.red.props.id]);
this.setState({
red: this.refs.red.refs.inp.getDOMNode().value,
green: this.refs.green.refs.inp.getDOMNode().value,
blue: this.refs.blue.refs.inp.getDOMNode().value
});
//this.props.txt = this.state.txt + "-" +this.state.count;
},
render:function(){
var txt = this.props.txt;
var cat = this.props.cat;
return (
React.createElement("div", null,
React.createElement("div", null,
React.createElement("div", null, txt),
React.createElement("div", null, cat),
React.createElement("div", null,
React.createElement("input", {type: "text", onChange: this.onChange, value: this.state.txt}),
React.createElement("br", null),
React.createElement("div", null,
this.state.red, ",",
this.state.green, ",",
this.state.blue
),
React.createElement(Slider, {ref: "red", update: this.onChange, id: "this-is-red"}),
this.state.red, " ", React.createElement("br", null),
React.createElement(Slider, {ref: "green", update: this.onChange}),
this.state.green, " ", React.createElement("br", null),
React.createElement(Slider, {ref: "blue", update: this.onChange}),
this.state.blue, " ", React.createElement("br", null)
)
),
"Test"
)
)
}
});
var Slider = React.createClass({displayName: 'Slider',
render: function(){
return (
React.createElement("div", null,
React.createElement("input", {ref: "inp", type: "range", min: "0", max: "255", onChange: this.props.update}),
React.createElement("hr", null)
)
);
}
})
React.render(React.createElement(App, {txt: "myboss myhero", cat: 4}),document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment