リアクション・ラベル・ピッカー・コンポーネント

Question

私は、現在選択されている色を設定するためにユーザーがクリックしなければならない色付きの四角形を生成するラベル入力反応コンポーネントを持っています。

状態の選択と設定を処理する方法がわかりません。親コンポーネントに関数を渡すかここで処理する必要がありますか？選択したラベルをどのようにして状態に設定できますか？私は反応する新しいです、物事は私が親にこの責任を与え、LabelInputComponent のみ変更を伝播させたいだけでなく

import React from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import styled from 'styled-components'; 


type Props = { 
    select: (e) => void, 
    selected: bool, 
    selectedColor: string 
}; 

class LabelInputComponent extends React.Component { 
    constructor(props: Props){ 
    super(props) 

    this.handleColorSelect = this.handleColorSelect.bind(this); 
    } 

    handleColorSelect(e){ 
    this.props.selectedColor = e.target.getAttribute('color') 
    } 

    render(){ 
    return(
     <div> 
     <StyledSelectBoxDiv backgroundColor="#FFFFFF" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#00C864" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#19C8C8" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#1996E1" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#964BAF" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#FA327D" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#FA3232" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#FA7D00" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#FAC800" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#BEC3C8" onClick={(e) => this.props.select}/> 
     <StyledSelectBoxDiv backgroundColor="#3E474B" onClick={(e) => this.props.select}/> 
     </div> 
    ) 
    } 
} 




const StyledSelectBoxDiv = styled.div.attrs({ 
    type: 'text', 
    selected: props => props.selected, 
    color: props => props.backgroundColor 
    })` 
    background-color: ${props => props.backgroundColor}; 
    width: 18px; 
    height: 18px; 
    float: left; 
    margin-right: 5px; 
    `; 

const mapStateToProps = state => { 
    return { 
    }; 
}; 

const mapDispatchToProps = dispatch => ({ 

}); 

export default connect(mapStateToProps, mapDispatchToProps)(LabelInputComponent); 

Answer 1

をクリックされていません。以下のような何か：

import StyledSelectBoxDiv from '...' 

const colors = ['#FFFFFF', '#00C864', ...] 

const LabelInputComponent = ({ onClick }) => 
    <div> 
    {colors.map((color, index) => 
     <StyledSelectBoxDiv key={index} color={color} onClick={() => onClick(color)} /> 
    )} 
</div> 

そしてあなたの親コンポーネント：

class ParentComponent extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     selectedColor: '', 
    } 

    this.onColorClick = this.onColorClick.bind(this) 
    } 

    onColorClick(color) { 
    console.log('selected color', color) 
    this.setState({ selectedColor: color }) 
    ... 
    } 

    render() { 
    return <LabelInputComponent onClick={this.onColorClick} /> 
    } 
} 

Answer 2

細かいStyledSelectBoxDivとしてダムcomponents.Itsしてください。

class LabelInputComponent extends React.Component { 
    constructor(props: Props){ 
    super(props) 
    state = { 
       selectedColor : "" // define the state for selected color 
      }; 

    this.handleColorSelect = this.handleColorSelect.bind(this); 
    } 

    handleColorSelect(selectedColor){ // hold color value 
    ////this.props.selectedColor = e.target.getAttribute('color') 
    this.setState({selectedColor:selectedColor}); //set a state 

    } 

    render(){ 
    return(
     <div> 
     // pass a color 
     <StyledSelectBoxDiv backgroundColor="#FFFFFF" onClick={(e) => this.handleColorSelect('#FFFFFF')}/> 
     <StyledSelectBoxDiv backgroundColor="#00C864" onClick={(e) => this.handleColorSelect('#00C864')}/> 
     </div> 
    ) 
    } 
}