React.js: đính kèm sự kiện từ cha mẹ cho trẻ em

Question

như được hiển thị trong ví dụ bên dưới, tôi muốn MyComponent tự động đính kèm sự kiện "onClick" vào con của nó. Sự kiện onClick sẽ kích hoạt alertView để có thể gọi phương thức phần tử được nhấp "getValue".

JSFiddle: http://jsfiddle.net/2g638bp8/

Làm cách nào để thực hiện việc này? Cảm ơn

var MyComponent = React.createClass({ 
    alertValue: function() { 
     // RETRIEVE THE CHILD HERE 
     alert(child.getValue()); 
    }, 
    render: function() { 
     var children = React.Children.map(this.props.children, function (c, index) { 
      return React.addons.cloneWithProps(c, { 
       ref: 'child-' + index 
      }); 
     }); 
     return (
      <div> 
       {children} 
      </div> 
     ); 
    } 
}); 

var MySubComponent = React.createClass({ 
    getValue: function() { 
     return this.props.val; 
    }, 
    render: function() { 
     return (
      <div>{this.props.val}</div> 
     ); 
    } 
}); 

React.render(
    <div> 
     <MyComponent> 
      <MySubComponent val="1" /> 
      <MySubComponent val="2" /> 
      <MySubComponent val="3" /> 
     </MyComponent> 
    </div>, 
    document.getElementById('container') 
); 

Answer 1

Bạn không thể gọi các phương thức về thành phần con trong React. Bạn chỉ có thể đặt thuộc tính. (child thực sự là một ReactElement chứa thông tin về lớp và các thuộc tính liên quan. Nó không phải là một thể hiện của thành phần bạn đã tạo).

Vì vậy, bạn có thể nghĩ về điều này một cách slightly different và di chuyển onClick đến MySubComponent:

var MyComponent = React.createClass({ 
    onHandleGiveValue: function (value) { 
     alert(value); 
    }, 
    render: function() { 
     var self  = this, 
      children = React.Children.map(this.props.children, function (c, index) { 
      return React.addons.cloneWithProps(c, {      
       onGiveValue: self.onHandleGiveValue.bind(self) 
      }); 
     }); 
     return (
      <div> 
       {children} 
      </div> 
     ); 
    } 
}); 

var MySubComponent = React.createClass({ 
    handleClick: function() { 
     this.props.onGiveValue(this.props.val); 
    }, 
    getValue: function() { 
     return this.props.val; 
    }, 
    render: function() { 
     return (
      <div onClick={ this.handleClick } >{this.props.val}</div> 
     ); 
    } 
}); 

React.render(
    <div> 
     <MyComponent> 
      <MySubComponent val="1" /> 
      <MySubComponent val="2" /> 
      <MySubComponent val="3" /> 
     </MyComponent> 
    </div>, 
    document.getElementById('container') 
); 

Bằng cách đó, mã của bạn có thể vượt qua giá trị hiện tại là một sự kiện để các thành phần cha mẹ. Tôi đã tạo sự kiện mới từ lớp học MySubComponent có tên là onGiveValue. Hiện tại, chỉ cần chuyển giá trị từ this.props.val. Nhưng, tất nhiên nó có thể là bất cứ điều gì.

Answer 2

1. Vượt qua cuộc gọi lại phụ huynh đến phụComponent, không cần tham chiếu cho thành phần con.

2. Phản ứng thích mẫu thiết kế bố cục, Vì vậy, thành phần cha mẹ của bạn nên chứa ba thành phần phụ đó. JS Fiddle: http://jsfiddle.net/68vt3umg/

   var MyComponent = React.createClass({ 
   handleChildClick: function (e, childValue) { 
       alert(childValue); 
   }, 
   render: function() { 
       return (
        <div> 
         <MySubComponent val="1" onSubClicked={this.handleChildClick}/> 
         <MySubComponent val="2" onSubClicked={this.handleChildClick}/> 
        </div> 
       ); 
   }}); 
   
   var MySubComponent = React.createClass({ 
       getValue: function() { 
       return this.props.val; 
       }, 
       handleOnClick: function (e, value) { 
       this.props.onSubClicked(e, this.props.val); 
       }, 
       render: function() { 
       return (
        <div onClick={this.handleOnClick}>{this.props.val}</div> 
       ); 
       } 
   }); 
   
   React.render(
       <div> 
       <MyComponent /> 
       </div>, 
       document.getElementById('container') 
   );