25、React 有状态组件与事件处理全解析

React 有状态组件与事件处理全解析

有状态组件：状态提升与属性定义

在 React 开发中，有状态组件是非常重要的概念，它拥有自己的数据值，可用于改变渲染输出。下面我们来详细探讨有状态组件的状态提升以及属性类型和默认值的定义。

状态提升

状态提升是指将子组件的状态数据提升到父组件，使得多个子组件可以共享这些状态数据。例如，在一个表格中，每个表格行有两个按钮，将计数器状态属性提升到父组件后，点击其中一个按钮会使两个按钮的状态都更新。

以下是一个简单的点击处理函数示例：

const handleClick = () => {
    //setCounter(counter + 5);
    props.incrementCallback(5);
    setHasButtonBeenClicked(true);
    props.callback();
}
return (
    <button onClick={ handleClick }
        className={ props.className }
        disabled={ props.disabled === "true" || props.disabled === true  }>
            { props.text} { props.counter }
            { hasButtonBeenClicked && <div>Button Clicked!</div>}
    </