Данные Child в Parent undefined

208
03 июня 2018, 04:40

Пытаюсь извлечь данные из компонента ColorChild при помощи функции setNewColor которую передаю в props

class Color extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            currentColor: null
        }
        this.setNewColor = this.setNewColor.bind(this, true)
    }

    renderColors(color, index) {
        return (
            //ПЕРЕДАЮ ФУНКЦИЮ setNewColor В КОМПОНЕНТ ColorChild
            <ColorChild key={index} color={color} setNewColor={this.setNewColor} />
        )
    }
    setNewColor(color){
        console.log('setNewColor', color.name);
    }

    render() {
        const {color} = this.props
        return (
            <div className="product-item__block">
                <span className="product-item__title">Color</span>
                <div className="product-set">
                    {color.map((color, index) => this.renderColors(color, index))}
                </div>
            </div>
        );
    }
}

 

class ColorChild extends React.Component {
    constructor(props) {
        super(props);
        this.sendColor = this.sendColor.bind(this)
    }
    sendColor(color){
        //ПЕРЕДАЮ ДАННЫЕ В РОДИТЕЛЯ
        this.props.setNewColor(color)
    }

    render() {
        const {color} = this.props
        return (
            <span onClick={() => this.sendColor(color)}
                  style={{backgroundColor : color.color}}
                  className={`product-set__item color ${(color.active ? 'active': '')}`}/>

        );
    }
}

В компоненте ColorChild использую функцию, она выполняется, но входной параметр undefined.

P.S делаю по аналогии http://jsbin.com/tipixiy/edit?js,output

READ ALSO
Амперсанд, метод split

Амперсанд, метод split

Необходимо разделить строки методом split(), но символом амперсанд(&), понятно, что просто это символ не ввести, как же быть? Как я пробовал:

183
Помогите с regExp js для такого примера

Помогите с regExp js для такого примера

как убрать обратные слэши? Были еще и символы переноса строк и табуляции, но их я убрал /[\t\n\"]+/g

173
Защита JavaScript кода от атак

Защита JavaScript кода от атак

Можно ли защитить свой JavaScript код, от изменений через просмотра исходного кода через браузерДопустим у меня есть веб-игра или веб-приложение...

160
Как программно удалять из кеша браузера уже проигранный видеоматериал?

Как программно удалять из кеша браузера уже проигранный видеоматериал?

Имеется прямая трансляция WebM видео с веб-камер в браузер:

172