Связь ребенка с родителем в React (JSX) без потока

Я действительно Новичок, чтобы реагировать, и я вытаскиваю волосы, пытаясь решить то, что кажется мне простой проблемой. Вот изображение компонента, который я построил.

Компонент Выбора Цвета

то, что я пытаюсь сделать, кажется тривиальным, но буквально каждая статья, которую я прочитал, объясняя, что делать, сказала мне что-то другое, и ни одно из решений не сработало. Это сводится к следующему: когда пользователь нажимает на тег, он создает лоток и петли через массив цветов, чтобы построить цветные кнопки. При нажатии кнопки цвета необходимо передать цвет, который был нажат на родительский компонент,и запустить функцию для обновления цвета. Я читал о потоке, пузырях событий, привязке "этого" к свойству, и ни одно из этих решений, похоже, не работает. Документы React в основном бесполезны для новичка, такого как я. Я хочу избежать сложных структур событий, таких как flux, поскольку я добавляю некоторые простые компоненты к существующему приложение, которое я не писал в React изначально.

кроме того, PS, этот код находится в JSX, что имеет для меня гораздо больше смысла, чем прямой JS react. Заранее спасибо за помощь!

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];

var EditDrawer = React.createClass({
    updateColor: function() {
        console.log("New Color: " + i);
    },
    render: function(){
        var passTarget = this;
        return (
            <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
                <div className="row">
                    <div className="col-xs-12">
                        {colorsArray.map(function(object, i){
                            return <ColorButton buttonColor={object} key={i} />;
                        })}
                    </div>
                </div>
            </div>
        );
    }
})

var ColorButton = React.createClass({
    render: function(){
        var buttonStyle = {
            backgroundColor: this.props.buttonColor,
        };
        return (
            <div className="tag-edit-color-button" style={buttonStyle} >
            </div>
        )
    }
})
8
javascript jsx react-jsx reactjs

3 ответов

функция обратного вызова должна работать. Как вы упомянули в своем предыдущем комментарии Вы можете использовать свой плен this к updateColor функции ребенка: 

var passTarget = this;
...
...
return <ColorButton 
  buttonColor={object} 
  key={i} 
  update={passTarget.updateColor} />

или, как сказал Богдан, вы можете передать его через map после функции обратного вызова:

{colorsArray.map(function(object, i){
  return <ColorButton 
           buttonColor={object} 
           key={i} 
           update={this.updateColor} />;
}, this)}

код <ColorButton /> компонент должен иметь возможность запускать простую функцию onClick:

onClick={this.props.update}

и затем вы можете просто использовать обычные цели событий в Родительском компоненте для захват цвета кнопки, которая была нажата:

updateColor: function(e) {
  console.log(e.target.style.backgroundColor);
}

вот демо для демонстрации.

6

вы можете просто передать функцию обратного вызова в дочерний из родительского компонента, так просто:

 <ColorButton buttonColor={object} key={i} onColorSelect={this.updateColor}/>

(при использовании React.createClass все методы класса уже привязаны к this, поэтому вам не нужно вызывать .bind(this)).

затем с ColorButton компонент вы можете вызвать этот обратный вызов как this.props.onColorSelect(...).

JS Bin пример:http://jsbin.com/fivesorume/edit?js, выход

3

ОК это довольно просто в реагировать без использования flux или redux, подобно передаче реквизита от родителя к ребенку, Здесь мы можем использовать функцию обратного вызова следующим образом:

var colorsArray = ["#ED5851", "#9CCC64", "#337AEC", "#ff7a45", "#7E58C2", "#FFEB3B", "#78909C", "#FFFFFF", "#213a4b"];


var EditDrawer = React.createClass({
    updateColor: function(i) {
        alert("New Color: " + i);
    },
    render: function(){
        return (
            <div className="container-fluid animated fadeIn extra-fast-animation tag-edit-drawer">
                <div className="row">
                    <div className="col-xs-12">
                        {colorsArray.map(function(object, i){
                            return <ColorButton buttonColor={object} key={i} updateColor={this.updateColor}/>;
                        }, this)}
                    </div>
                </div>
            </div>
        );
    }
});


var ColorButton = React.createClass({
    updateColor: function() {
        this.props.updateColor(this.props.buttonColor);
    },
    render: function(){
        var buttonStyle = {
            backgroundColor: this.props.buttonColor,
        };
        return (
            <div className="tag-edit-color-button" 
            style={buttonStyle}
            onClick={this.updateColor}>
              this.props.buttonColor
            </div>
        )
    }
});
1