Giao tiếp giữa trẻ em và phụ huynh trong React (JSX) mà không có thông lượng

Question

Tôi thực sự mới đối với React, và tôi đang cố gắng giải quyết những gì dường như là một vấn đề đơn giản. Đây là một hình ảnh của các thành phần tôi đã xây dựng.

Color Picking Component

Những gì tôi đang cố gắng để thực hiện có vẻ tầm thường, nhưng theo nghĩa đen mỗi bài viết tôi đã đọc giải thích làm gì đã nói với tôi một cái gì đó khác nhau, và không phải là một trong những giải pháp đã làm việc. Nó chia nhỏ cho điều này: Khi người dùng nhấp vào một thẻ, nó sẽ tạo ra một khay và lặp qua một mảng màu để tạo các nút màu. Khi một nút màu được nhấp, nó cần phải chuyển màu nào được nhấp vào thành phần gốc của nó và chạy một hàm để cập nhật màu của nó. Tôi đã đọc về thông lượng, sự kiện bubbling, ràng buộc "này" cho một tài sản, và không ai trong số những giải pháp đã dường như làm việc. Các tài liệu React về cơ bản là vô dụng đối với một người mới như tôi. Tôi muốn tránh các cấu trúc sự kiện phức tạp như thông lượng vào thời điểm này vì tôi đang thêm một số thành phần đơn giản vào một ứng dụng hiện có mà tôi không viết trong React ban đầu.

Ngoài ra, PS, Mã này nằm trong JSX có ý nghĩa hơn với tôi hơn là JS phản ứng thẳng. Cảm ơn trước sự giúp đỡ của bạn!

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

Answer 1

Chức năng gọi lại sẽ hoạt động. Như bạn đã đề cập trong comment trước của bạn, bạn có thể sử dụng của bạn bắt this để truy cập updateColor chức năng từ con:

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

Hoặc như Bogdan nói bạn có thể vượt qua nó thông qua bản đồ sau khi hàm callback của bạn:

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

sau đó

phần <ColorButton /> của bạn nên có thể chạy một hàm onClick đơn giản:

onClick={this.props.update} 

Và sau đó bạn chỉ có thể sử dụng các mục tiêu sự kiện bình thường trong thành phần cha mẹ để nắm bắt được màu sắc của nút đó được nhấp:

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

Đây là một đầy đủ DEMO để chứng minh.

Answer 2

Bạn chỉ có thể vượt qua chức năng gọi lại vào trẻ em từ thành phần cha mẹ của bạn, đơn giản như này:

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

(khi sử dụng React.createClass tất cả các phương pháp lớp học đã được ràng buộc để this, vì vậy bạn không bắt buộc phải gọi số .bind(this)).

Sau đó, từ ColorButton thành phần bạn có thể gọi lại số gọi này là this.props.onColorSelect(...).

Ví dụ về JS Bin: http://jsbin.com/fivesorume/edit?js,output

Answer 3

OK, này là khá đơn giản trong Phản ứng mà không sử dụng flux hoặc redux, tương tự như đi xuống đạo cụ từ mẹ sang con, ở đây chúng ta có thể sử dụng chức năng gọi lại như thế này:

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