react state属性状态

State属性

• 定义组建的属性状态
• setState（）修改状态值

// state属性，为组件设置状态
class App extends React.Component{
    // 构造函数，只被调用一次
    constructor(props){
        super(props);
        // 初始化状态值
        this.state = {
            islike:true
        };
        // 为自定义的方法绑定this
        this.change = this.change.bind(this)
    }
    // 自定义方法来更改状态
    change(){
        this.setState({
            islike:!this.state.islike
        })
    }
    render(){
        let {islike} = this.state;
        let msg = islike ? 'true' : 'false';
        return(
            <h1 onClick={this.change}>
                {msg}
            </h1>
        )
    }
}

// 渲染
ReactDOM.render(<App />,document.getElementById("example") )

• 小练习:将输入框的数据添加到页面下方

// 定义主组件
class App extends React.Component{
    // 构造函数
    constructor(props){
        super(props);
        // 初始化数据状态值
        this.state = {todos:["吃饭","睡觉","打豆豆"]};
        // 为自定义的方法绑定this
        this.addmsg = this.addmsg.bind(this)
    }
    addmsg(msg){
        // 同下边的写法
        // if(msg.trim()){
        //     let todos = this.state.todos;
        //     todos.unshift(msg);
        //     this.setState({
        //         todos:todos // 同名可以省略
        //     })
        // }else {
        //     alert("不能为空")
        // }
        // 判断输入是否合法
        if(!msg.trim()){
            alert("输入内容不合法");
            return // 符合条件退出函数的执行，后面内容不会被执行
        }
        let todos = this.state.todos; // 获取状态值
        todos.unshift(msg); // 向数组中添加数据，unshift添加到第一位，直接修改原数组，返回值为数组长度
        // 更改状态值
        this.setState({
            todos:todos // 同名可以省略
        })
    }
    render(){
        return(
            <div>
                <h2>props refs state的综合应用</h2>
                <Add addmsg={this.addmsg} len={this.state.todos.length} />
                <Show todos={this.state.todos}/> 
            </div>
        )
    }
}
// 定义添加功能组件
class Add extends React.Component{
    constructor(props){
        super(props);
        this.getmsg = this.getmsg.bind(this)
    }
    getmsg(){
        let msg = this.refs.msg.value; // 获取refs数据
        this.props.addmsg(msg);
        this.refs.msg.value = "" // 清空输入框数据
    }
    render(){
        return(
            <div>
                <input ref="msg"/>
                <button onClick={this.getmsg}>添加#{this.props.len}</button>
            </div>
        )
    }
}
// 定义展示数据组件
class Show extends React.Component{
    render(){
        let {todos} = this.props;
        return(
            <ul>
                {todos.map((item,index) => {
                    return <li key={index}>{item}</li>
                })}
            </ul>
        )
    }
}

// 渲染组件
ReactDOM.render(<App />,document.getElementById("example") )