React label picker component

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> 
    ) 
    } 
}