Question

我有以下内容：

class PickColor extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            active: 0
        }

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

    setActiveClass () {
        this.setState({ active:this.state.active + 1 })
    }

    backToPrevious (e) {
        e.preventDefault();
        this.props.actionID(1);
        this.props.activeNav('case-0');
    }
    goToNext (e) {
        e.preventDefault();
        this.props.actionID(3);
        this.props.activeNav('case-2');
        this.props.setNavB(true);
        this.props.setIconsHolderOnOff(true);
    }
    getColorValue(event) {
        var color_id = event.target.getAttribute("data-color-name");
        this.props.colorName(color_id);
        this.props.setColorTextID(event.target.getAttribute("data-color-id"));
        this.setActiveClass();
    }
    getColorFromCode(color){
        var className;

        switch (color) {
            case "fc0d1b":
                className = 'red';
            break;
            case "fed343":
                className = 'yellow';
            break;
            case "2afd82":
                className = 'green';
            break;
            case "2af3fd":
                className = 'blue';
            break;
            case "a025fb":
                className = 'purple';
            break;
        }

        return className;
    }
    getActiveForm () {
        if (this.props.show === 2) {
            return "show-form";
        }
        else {
            return "";
        }   
    }

    render () {
        console.log(this.state.active);
        var activeForm = this.getActiveForm(this.props.show);
        var colorsLink = [],
            that = this,
            colorInfo ;

        this.props.colors.forEach(function(el, i) { 
            colorsLink.push(<li 
                                data-color-id={el.id}
                                data-color-name={that.getColorFromCode(el.background_color)}
                                className={that.props.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)} 
                                key={el.background_color} 
                                onClick={that.getColorValue.bind(that)}>
                            </li>
            );
        });

        if (this.props.currentState.activeColorTextID != "") { 
            colorInfo = <ColorInfo colors={this.props.colors} colorID={this.props.currentState.activeColorTextID}  />
        }

        return (
            <section className={"colors form " + activeForm}>
                <h2>Pick your<br /> color</h2>
                <ul>
                    {colorsLink}
                </ul>
                <div className="color-info-wrapper">
                    {colorInfo}
                </div>
                <button className="back" onClick={this.backToPrevious.bind(this)}><span>back</span></button>
                <button className="next" onClick={this.goToNext.bind(this)}><span>continue</span></button>
            </section>
        );
    }
}

我正在尝试分配一组活跃的onClick，但它似乎根本没有添加。

Answer 1

我认为您引用的是props.active而不是state.active ...否则，我不确定是否有active处于状态。

className={that.props.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)}

应为that.state.active == i ? 'active' ...

此外，您可以简化从地图创建的colorsLink数组，而不是在列表上进行迭代并使用推送。地图会返回一个新数组，您可以通过合并forEach和push来手动执行此操作。

var colorsLink = this.props.colors.map(function(el, i) { 
    return <li 
                data-color-id={el.id}
                data-color-name={that.getColorFromCode(el.background_color)}
                className={that.state.active == i ? 'active' : '' + that.getColorFromCode(el.background_color)} 
                key={el.background_color} 
                onClick={that.getColorValue.bind(that)}>
           </li>;
    });

反应状态增量不更新视图

1 个答案: