react 修改值

react 和 vue不太一样

vue直接通过修改data里面的值就可以改变视图view

但是react是通过  this.setState 这个方法来改变状态(也就是值)

//类定义一个组件,绑定一个点击事件改变值
            class Click extends React.Component {
                constructor(props){
                    super(props)
                    this.state ={  //设置的默认值
                        name:'浪里白漂'
                    }
                    this.handleClick=this.handleClick.bind(this)
                }
                handleClick(){ 
                     this.setState({ //点击事件调用 setState 方法,设置一个新的值
                         name:'高速浪子'
                     })
                }
                render(){
                    return (
                        <div>
                            <button onClick={this.handleClick}>
                            点击
                            </button>
                            <span>{this.state.name}</span>
                        </div>
                    )
                }
            }
            ReactDOM.render(
                <Click/>,document.getElementById('example')
            )

结果如下:

猜你喜欢

转载自www.cnblogs.com/xxflz/p/12561270.html