子コンポーネントの子からコール親関数が反応する

Question

単に孫コンポーネントから親コンポーネント関数を呼び出す必要があります。ここで

は私の孫である：ここでは

var ReactDOM = require('react-dom'); 
var React = require('react'); 

class Button extends React.Component { 
    constructor(props) { 
     super(props); 
     console.log(props); 
     this.state = { 
      options: props.options, 
      showDropdown: false 
     }; 
    } 
componentWillMount() { 
    var defaultFeatureOptionId = this.props.feature.DefaultFeatureOptionId;  
    var options = [...this.state.options] 
    var isBigButton = false; 
    options.forEach((option) => { 
     if (option.Description.length > 8) { 
      isBigButton = true; 
     } 
    }); 
    options.forEach((option) => { 
     var classes = ""; 
     if (isBigButton) { 
      classes = "option-button big-button hidden"; 
     } else { 
      classes = "option-button small-button hidden"; 
     } 
     if (option.Id === defaultFeatureOptionId) { 
      classes = classes.replace("hidden", " selected"); 
     } 
     option.class = classes; 
    }) 
    this.setState({ options }) 
} 
updateIllustration(value) { 
    console.log(this.props.onClick); 
    this.props.onClick(value); 
} 
toggleDropdown(index) { 
    var options = [...this.state.options]; 
    var option = options[index]; 

    this.updateIllustration(option.Option); 

    var showDropdown = !this.state.showDropdown; 
    this.setState({ 
     showDropdown: showDropdown 
    }) 
    options.forEach((opt) => { 
     opt.class = opt.class.replace("selected", ""); 
     opt.class = opt.class.replace("hidden", ""); 
     if (opt.Id !== option.Id && this.state.showDropdown) { 
      opt.class += " hidden"; 
     } 
     if (opt.Id === option.Id) { 
      opt.class += "selected"; 
     } 
    }); 
    this.setState({ options }) 
} 
render() { 
    if (this.state.options) { 
     return (<div> { 
      this.state.options.map((option, index) => { 
       return <div className={option.class} key={option.Id} onClick={() => this.toggleDropdown(index)}> 
        <div> {option.Description}</div> 
        <img className="option-image" src={option.ImageUrl}></img> 
        <i className={(this.state.showDropdown ? 'hidden' : ' fa fa-chevron-down') } aria-hidden="true" onClick={() => this.toggleDropdown(index)}></i> 
       </div> 
      }) 
     } 

     </div> 
     ) 
    } 
    else { 
     return <div>No options defined</div> 
    } 
} 
} 

module.exports = Button; 

は、子コンポーネントである：私は呼びたい

var ReactDOM = require('react-dom'); 
var React = require('react'); 
var ConfigurationService = require('../configurationService'); 
var Option = require('./option'); 

class Feature extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     features: null 
    }; 
    this.getConfiguration(); 

} 
updateIllustration(object) { 
    console.log("MADE IT BACK"); 
    console.log(object); 
} 
getConfiguration() { 
    var self = this; 
    var config = ConfigurationService.getConfiguration('NORMSTAHL', 'SUPERIOR').then(function (config) { 
     console.log("TJE"); 
     console.log(config.data); 
     self.setState({ features: config.data.Features }) 
    });  
} 
render() { 
    if (this.state.features) { 
     return (<div className="feature-component-container"> { 
      this.state.features.map(function (feature) { 
       return <div className="feature" key={feature.Id}> 
        <div className="feature-header">{feature.Description} </div>{ 
         <Option options={feature.FeatureOptions} type={feature.Type} feature={feature} onClick={() => this.updateIllustration } /> 
        }      
       </div> 
      }) 
     } 
     </div>) 
    } 
    else { 
     return <div>no data</div> 
    } 
} 
} 

module.exports = Feature; 

機能：

var ReactDOM = require('react-dom'); 
var React = require('react'); 
var Button = require('./button'); 
var Slider = require('./slider'); 

class Option extends React.Component { 
constructor(props) { 
    super(props); 
} 
updateIllustration(value) { 
    this.props.onClick(value); 
} 
render() {  
    if (this.props.type.Id === 1) { 
     return <div className="option"> <Button options={this.props.options} feature={this.props.feature} onClick={() => this.props.onClick} /></div> 
    } 
    if (this.props.type.Id === 2) { 
     return <div className="option"> <Slider options={this.props.options} feature={this.props.feature} onClick={() => this.props.onClick}/></div> 
    } 
    else { 
     return <div> No option type defined </div> 
    } 
} 
} 

module.exports = Option; 

そしてここでは、最終的な親コンポーネントですupdateIllustration関数ですが、今は何のエラーもありませんが、それは単にすべての方法に戻ることはありませんconsole.log（ "MADE IT BACK"）;私は文脈でそれをする方法について読むことがありますが、誰もがそれが動作すると言いますが、それは推奨されていません。だから、それを行うための推奨される方法は何ですか？

Answer 1

その名前の不一致の問題、親ではonClickという名前で関数を渡すので、子ではthis.props.updateIllustrationの代わりにthis.props.onClickを使用する必要があります。 updateIllustrationは実際の関数の名前であり、その関数を別の名前で渡しています。チャイルドコンポーネントで

使用この：

<Button 
    options={this.props.options} 
    feature={this.props.feature} 
    onClick={() => this.props.onClick()} /> 

更新：

あなたは、その関数を呼び出す必要があります。チャイルドコンポーネントで

<Option ... onClick={() => this.updateIllustration() } /> //here use() 

：親コンポーネントで

は

<Button ... onClick={() => this.props.onClick()} /> //here use() 

は、あなたが他の場所を使用しているようにその問題がarrow functionを使用し解決するために、mapにコンテキストをバインドするのを忘れ：

this.state.features.map((feature) => {