Color调色板 (React版)

最新推荐文章于 2025-04-02 09:22:10 发布

web_zsh

最新推荐文章于 2025-04-02 09:22:10 发布

阅读量1.1k

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.youkuaiyun.com/web_only_/article/details/111934922

版权

React 专栏收录该内容

5 篇文章

订阅专栏

博客介绍了Color调色板案例中兄弟组件间的数据传递方式，即先将数据传递给父组件，再由父组件传递给另一个子组件，涉及前端组件数据交互知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例：Color调色板

在这里插入图片描述
兄弟组件之间的数据传递方式：
现将数据传递给父组件，父组件再将数据传递给另一个子组件。

const {Component,Fragment} = React;
//子组件 ColorBoard
class ColorBoard extends Component{
    render(){
        const {color} = this.props;
        return(
            <Fragment>
                <div className="colorBoard" style={{backgroundColor:color}}></div>
            </Fragment>
        )
    }
}

//子组件 ColorSelector
class ColorSelector extends Component{
    constructor(props){
        super(props);
        this.state = {
            colorItem:[255,255,255]
        }
    }
    //当滑竿发生改变时
    rangeChange(event,index){
        const {onColorChange} = this.props;
        let colorItem = [...this.state.colorItem];
        colorItem[index] = parseInt(event.target.value);
        this.setState({
            colorItem
        })
        onColorChange(this.state.colorItem);
    }
    render(){
        return(
            <Fragment>
                {
                    this.state.colorItem.map((item,index)=>{
                        return (
                            <input type="range" min={0} max={255} value={item}  key={index}
                            onChange={()=>this.rangeChange(event,index)}/>
                        )
                    })
                }
            </Fragment>
        )
    }
}

//父组件Color
class Color extends Component{
    constructor(props){
        super(props);
        this.state = {
            color:'#FFFFFF'
        }
    }
    colorChange(myColor){
        let color = '#' + myColor.map(item=>{
            return item>15?item.toString(16):'0'+item.toString(16)
        }).join('').toUpperCase();
        this.setState({
            color
        })
    }
    render(){
        return (
            <Fragment>
                <div className="container">
                    <div className="row">
                        <div className="col-md-12">
                            <h1>React兄弟组件的数据传递 <small>Color调色板</small></h1><hr/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col=md=5">
                            <ColorBoard color={this.state.color}></ColorBoard>
                        </div>
                        <div className="col-md-5">
                            <div>颜色代码：{this.state.color}</div>
                            <ColorSelector onColorChange={this.colorChange.bind(this)}></ColorSelector>
                        </div>
                    </div>
                </div>
            </Fragment>
        )
    }
}

ReactDOM.render(
    <Color></Color>,
    document.getElementById('colorPalette')
)