<react学习笔记(6)>知识点回顾(2)事件绑定及传参，组件，属性和状态，表单元素...-CSDN博客

1.知识点回顾(2)

1.事件绑定

demo

//点击执行的函数
function handleClick() {
    console.log('handleKeyDown')
};
//键盘按下的函数
function handleKeyDown() {
    console.log('handleKeyDown')
};
const element1 = (
    <div>
        <input
            type="button"
            value="自执行"
            onClick={alert('自执行')}
        />
        <br />
        <input
            type="button"
            value="箭头函数"
            onClick={()=>{alert('箭头函数')}}
        />
        <br />
        <input
            type="button"
            value="事件调用函数"
            onClick={ handleClick}
        />
        <br />
        <input type="text" defaultValue="keydown" onKeyDown={handleKeyDown}/>
    </div>
);
ReactDOM.render(
    element1,
    document.querySelector('#app')
);
复制代码

打开网页会先自动弹出alert弹窗;点击箭头函数，弹出alert弹窗
效果图：

2.传参，使用bind

回顾：call和bind：call会自执行;bind不会
bind(this指向,参数)

// 函数 的[最后]一个参数 是 事件对象event
function handleClick(data,e) {
    console.log('handleClick');
    console.log(data);
    console.log(e);
    console.log(e.target);
};
const element2 = (
    <div>
        <input
            type="button"
            value="事件调用函数"
            onClick={ handleClick.bind(this,'这才是传参') }
        />
    </div>
);
ReactDOM.render(
    element2,
    document.querySelector('#app')
)
复制代码

效果图：

3.组件

以上例子中的element都只是一个普通变量，是没有状态的。
区别是否是组件，也就是看有状态或者无状态。
状态: 让数据驱动视图的响应式数据。
这些数据存放在一个地方，方便于管理 state = {}，例如：state = {arr:[],title:''}

1.声明式无状态组件

声明一个有名的函数组件，此时也只是一个无状态的组件

function Head(){
    return (
        <header> 这是页面头部 </header>
    )
};
function Main(){
    return (
        <main> 这是页面主体内容 </main>
    )
};
function Foot(){
    return (
        <footer> 这是页面底部 </footer>
    )
};
let element = (
    <div>
        <Head></Head>
        <Main></Main>
        <Foot></Foot>
    </div>
);
ReactDOM.render(
    element,
    document.querySelector('#app')
);
复制代码

效果图：

2.声明式有状态组件

用class声明,extends继承React中的Component组件

// 有状态的组件
// 定义 Head组件 继承自 React的 component组件
// 那么 就可以去调用 React的 component组件所提供的 方法或属性
class Head extends React.Component {
    constructor(){
        super();  // 执行父类的构造函数
        this.name = 'sjl';
        this.age = 18;
    }
    // 不要写function
    say(){
        console.log('say方法');
    }
    render(){ // 渲染
        return (
            <header> 这是真正的有状态的组件 头部 </header>
        )
    }
};
let element = (
    <div>
        <Head></Head>
    </div>
);
ReactDOM.render(
    element,
    document.querySelector('#app')
);
复制代码

3.组件传值

demo

class Head extends React.Component {
    constructor(){
        // 如果 不在 constructor构造里面 用实例对象上的props （this.props）那么可以不用传参
        super(...arguments);  // 执行父类的构造函数,接收参数
        this.name = 'sjl';
        this.age = 18;

        // 对象里面的数据 是从后端返回的
        // state是负责当前组件（Head）的用户界面
        // 如果 state里面的数据 发生改变 视图就会自动更新 -> 响应式数据
        
        this.state = {
            abc: this.props.text
        }; //接受<Head></Head>中的text
    }
    render(){ // 渲染
        return (
            <div>
                <header> 
                    { this.state.abc && this.state.abc }
                </header>
            </div>
        )
    }
};
let element = (
    <div>
        <Head text='这是真正的有状态的组件 头部'></Head>
    </div>
);

ReactDOM.render(
    element,
    document.querySelector('#app')
);
复制代码

效果图：

4.setState()

setState()方法可以改变数据

class Head extends React.Component {
    constructor(){
        super(...arguments); 
        this.name = 'sjl';
        this.age = 18;
        
        this.state = {
            abc: this.props.text
        }; 
    }
    handleClick1(data, e){
        console.log(this);
        console.log(data);
        console.log(e);
        this.setState({
            abc: '重新赋值'
        })
    }
    handleClick2(data, e){
        console.log(e);
        console.log(data);
    }
    render(){ 
        return (
            <div>
                {
                    //第一种写法
                }
                <header onClick={this.handleClick1.bind(this,"传来的数据")}> 
                    { this.state.abc && this.state.abc }
                </header>
                {
                    //第二种写法
                    //箭头函数中的this指向父级作用于，也就是Head实例
                }
                <header onClick={(e) => {this.handleClick2("第二种", e)}}> 
                    { this.state.abc && this.state.abc }
                </header>
            </div>
        )
    }
};
let element = (
    <div>
        <Head text='这是真正的有状态的组件 头部'></Head>
    </div>
);

ReactDOM.render(
    element,
    document.querySelector('#app')
);
复制代码

点击第一种的效果图：

点击第二种的效果图：

5.表单元素注意点

input单标签需要闭合
label标签中的for属性,在React中需要用htmlFor代替

const element = (
    <div>
        <input id={'txt'} type="text" />
        <label htmlFor="txt"></label>
    </div>
);
ReactDOM.render(
    element,
    document.querySelector('#app')
);
复制代码