1. Click on the event
<script type="text/babel">
function fn() {
alert(12);
}
If the value of a function // event
ReactDOM.render((
<div>
<the INPUT of the type = "the Button"
onClick the Fn} = {
value = "you point me to it!" />
</div>
),document.querySelector("#myApp"));
</script>
2. Click on the event by value
<script type="text/babel">
function fn(num) {
return function () {
alert(num);
}
}
ReactDOM.render((
<div>
{/ * The value of a click event bindings are the results fn function * /}
<the INPUT of the type = "the Button"
onClick = {the Fn (23)}
value = "you point me to it!" />
</div>
),document.querySelector("#myApp"));
</script>
3. Event 4. Event
Example 1:
<script type="text/babel">
ReactDOM.render((
<div>
<input type="button"
onClick={function () {
alert(78)
}}
Value = "you point me to it!" />
</div>
),document.querySelector("#myApp"));
</script>
Example 2:
<script type="text/babel">
ReactDOM.render((
<div>
<input type="button"
onClick={()=>{
alert(87)
}}
Value = "you point me to it!" />
</div>
),document.querySelector("#myApp"));
</script>
5. Event bind
function fn(a,b,e) {
console.log(a,b,e.target.value,this)
// 12 "You Come hit me ah!" Undefined
}
const obj = {
userName:"laoLi",
age:12
};
ReactDOM.render((
<div>
<the INPUT of the type = "the Button"
onClick = {fn.bind (obj, 1, 2)}
value = "Come and you hit me!" />
</div>
),document.querySelector("#myApp"))
6. Optimization and events show hide 7. Show hidden
let isShow = true;
render();
function changeIsShow(){
isShow = !isShow
render();
}
function render() {
ReactDOM.render((
<div>
<Input type = "button" onClick = {changeIsShow} value = "displaying and hiding" />
<div style={{
width:"100px",
height:"100px",
background:"red",
display:isShow?"block":"none"
}}></div>
</div>
),document.querySelector("#myApp"));
}
8.
Non-state component
Definition: defined by function, which must have a return value. Returned content that is content components.
// function name that is the name of the component
// function must have a return value, if you do not want to return data Return null
Use: Your function is used as a label
Example 1:
function Fn() {
return null;
// return (
// <div>lala</div>
// )
}
ReactDOM.render((
<div>
Components together to learn it
<Fn></Fn>
</div>
),document.querySelector("#myApp"));
Example 2:
Syntax: It is recommended to return the parcel value in brackets
There is one and only one root element.
function MyCom() {
return (
<div>
Hello everybody, my name is MYCOM
</div>
)
}
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
9. stateless component values pass
// property component, i.e., is on the object parameter function defining component among the received
// subassembly is not allowed to receive properties directly modified.
function MyCom(props) {
console.log(props);
function changeAge(){
props.age = 1234;
}
return (
<div>
Hello everybody, my name is MYCOM
<input type="button" value="修改属性" onClick={changeAge}/>
</div>
)
}
let num = 9;
ReactDOM.render((
<div>
<MyCom
userName = "xixi" age="12" num={num}></MyCom>
</div>
),document.querySelector("#myApp"));
10. The assembly of the non-modified parent element attributes state
// receive properties
function MyCom(props) {
return (
<div>
<input type="button" value="修改userName" onClick={()=>{changeUserName("three");}} />
I is a stateless component {props.userName}
</div>
)
}
// components MyCom use, and pass a property called userName value of one
let userName = "one";
function changeUserName(str) {
userName = str;
ReactDOM.render(<MyCom userName={userName}/>,document.querySelector("#myApp"));
}
ReactDOM.render(<MyCom userName={userName}/>,document.querySelector("#myApp"));
11. The assembly of nested
function Two() {
return (
<div>two</div>
)
}
function One() {
return (
<div>
one
<Two></Two>
</div>
)
}
ReactDOM.render((
<div>
<One></One>
</div>
),document.querySelector("#myApp"));
12. The
state component
// state components: component defined by a class.
React.Component
.
// class name that is the name of the component
class My extends React.Component{
// render, it must have a return value, returned content is good content components
render(){
return (
<div>
I am a state assembly
</div>
)
}
}
ReactDOM.render((
<div>
<My></My>
</div>
),document.querySelector("#myApp"));
13. The state of a component by value 1
Components by value:
Transfer of property, in fact, is put under the props object of your parent's React.Component
传递属性： <My userName="nihao" age="12"></My>
接收 ：this.props.userName this.props.age
class My extends React.Component{
constructor(props){
super(props);
console.log(this.props);
}
render(){
console.log("render",
this.props
);
return (
<div>
lala{this.props.userName}
</div>
)
}
}
ReactDOM.render((
<div>
<My userName="nihao" age="12"></My>
</div>
),document.querySelector("#myApp"))
14. The status returned value of the component 2
class Tag extends React.Component{
render(){
return (
<div>
<input type="button" onClick={
this.props.changeNum} value={
this.props.num}/>
</div>
)
}
}
class MyCom extends React.Component{
constructor(){
super();
this.num = 1;
console.log("constructor")
}
changeNum () {
console.log(11111,this);
this.num += 1;
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
}
render(){
console.log("render")
return (
<div>
Mycom
<Tag num={this.num} changeNum = {this.changeNum.bind(this)}></Tag>
</div>
)
}
}
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
15. The status returned value of the component 3
class Wrap extends React.Component{
constructor(){
super();
this.isShow = true;
console.log("costructor");
}
changeIsShow(){
this.isShow = !this.isShow;
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
}
render(){
console.log("render");
return (
<div>
<input type="button" onClick={this.changeIsShow.bind(this)} value="显示隐藏"/>
<div style={{
width:"200px",
height:"200px",
background:"red",
display:this.isShow?"block":"none"
}}>
</div>
</div>
)
}
}
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
16. The assembly state status (state setState)
Example 1:
class Wrap extends React.Component{
constructor(){
super();
this.state = {
isShow:true
}
}
changeIsShow(){
// this.state.isShow = !this.state.isShow;
// update your data, your ReactDOM.render re-executed.
this.setState({
isShow:!this.state.isShow
})
}
render(){
console.log("render");
return (
<div>
<input type="button" onClick={this.changeIsShow.bind(this)} value="显示隐藏"/>
<div style={{
width:"200px",
height:"200px",
background:"red",
display:this.state.isShow?"block":"none"
}}>
</div>
</div>
)
}
}
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
Example 2:
class Wrap extends React.Component{
constructor(){
super();
this.state = {
a: 9
}
}
changeNum () {
// this.state.num = this.state.num+1;
// ReactDOM.render((
// <div>
// <Wrap></Wrap>
// </div>
// ),document.querySelector("#myApp"));
// asynchronous execution
this.setState({
num:this.state.num+1
}, () => {// data When you execute the function will be updated
console.log(this.state.num)
})
// console.log(this.state.num)
}
render(){
return (
<div>
<input type="button" onClick={this.changeNum.bind(this)} value={this.state.num} />
</div>
)
}
}
ReactDOM.render((
<div>
<Wrap></Wrap>
</div>
),document.querySelector("#myApp"));
About the event this binding problem (undefined):
1. directly bind, using the current function of the frequency is not high;
class Wrap extends React.Component{
constructor(){
super();
this.state = {
a: 9
}
}
changeNum () {
this.setState({
num:this.state.num+1
}, () => {// data When you execute the function will be updated
console.log(this.state.num)
})
}
render(){
return (
<div>
<input type="button"
onClick{this.changeNum.bind(this)}
value={this.state.num}/>
</div>
)
}
}
2. Direct write function, which is not reused, and the logic code is less
class Wrap extends React.Component{
constructor(){
super();
this.state = {
a: 9
}
}
render(){
return (
<div>
<input type="button" onClick={()=>{
this.setState({
num:this.state.num+1
})
}} value={this.state.num}/>
</div>
)
}
}
3. In the constructor which bind, this function fewer components, but the frequency of use is relatively high
class Wrap extends React.Component{
constructor(){
super();
this.state = {
a: 9
}
this.abc = this.changeNum.bind(this);
}
changeNum () {
this.setState({
num:this.state.num+1
})
}
render(){
return (
<div>
<input type="button" onClick={this.abc} value{this.state.num}/>
</div>
)
}
}
4. The direct function is defined as a function of an arrow, can be reused, not bind, but the traditional values trouble
class Wrap extends React.Component{
constructor(){
super();
this.state = {
a: 9
}
}
changeNum = () => {
this.setState({
num:this.state.num+1
})
}
render(){
return (
<div>
<input type="button" onClick={()=>{
this.changeNum(123);
}} value={this.state.num}/>
</div>
)
}
}