1、鼠标点击事件,通过点击一个a标签,跳转界面
{/*添加一个a标签,并定义跳转的路径,点击的方法是用来阻止事件的,*/}
<a href="https://www.baidu.com" onClick={onTouchClick}>点击</a>
{/*定义一个点击的方法,这里的preventDefault是阻止事件的默认行为,a标签就不能跳转*/}
function onTouchClick(e) {
e.preventDefault();
}
2、条件渲染,根据属性不能,渲染不同的值
新建一个js文件,编写判断逻辑
import React from 'react';
class IfTest extends React.Component{
constructor( props){
super( props );
//返回的值
let content;
if(this.props.age >= 18){
content = <h1>年龄适合,可以进入</h1>
}else{
content = <h1>年龄不符合,不可以进入</h1>
}
//判断复制
this.state = {content : content}
}
//返回值
render() {
return (
<div>
{this.state.content}
</div>
)
}
}
export default IfTest
在App中去调用,根据定义的熟悉,传值判断,并返回值呈现在界面上
<IfTest age="15"/>
3、使用map渲染多个组件
const number = [1,2,3,4,5];
const listItems = number.map((value) => <li>{value}</li>)
<ul>{listItems}</ul>
4、表单提交input系列
创建一个js文件,在文本框中,绑定改变事件,当值改变时,将输入的值赋给定义的属性
import React from 'react';
class InputTest extends React.Component{
constructor( props){
super( props );
//在构造器中定义属性
this.state = {account:""}
}
//当改变时将目标的值赋值给属性
onInputChange = (e) => {
this.setState({account:e.target.value})
};
//提交按钮的事件
onSubmitClick = (e) => {
alert("你输入的账号是:" + this.state.account);
};
render() {
return (
<form>
{/*这里文本框的初始值为定义值,方便绑定的事件判断*/}
<label>用户名:</label><input type="text" width="100px" value={this.state.account} onChange={this.onInputChange}/>
<input type="submit" value="提交" onClick={this.onSubmitClick}/>
</form>
);
}
}
export default InputTest
在App中去调用
<InputTest />