Question

我有一个标签输入反应组件，它会生成一堆彩色方块，用户应该点击这些方块来设置当前选择的颜色。

我不知道如何处理状态的选择和设置，我应该将函数传递给父组件还是在这里处理它？如何将所选标签设置为状态？我是新手做出反应，事情并没有好好点击

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

我将此责任交给父母，让LabelInputComponent 只传播变化。类似的东西：

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保持为愚蠢的组件。没关系。

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

反应标签选择器组件

2 个答案: