Reactjs 如何在react中调用子类组件中的父方法 //子组件 从“React”导入React，{Component} const NavButton=（{active，title，href，onSetActive}）=>{ 返回( {title} ) } 类子扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 活动索引：1， 按钮：[ { 标题：“1”， 关键字：0， 价值：1 }, { 标题：“3”， 重点:1,， 价值：3 } ] } } //它正在更改活动索引 handleChangeActive（newActiveIndex）{ //控制台日志（“工作”）； this.setState（{activeIndex:newActiveIndex}）； } render（）{ const{activeIndex}=this.state； 返回( {this.state.buttons.map（（button，buttonIndex）=> /*根据activeIndex状态确定哪个导航按钮处于活动状态*/ this.investmentHandler.bind（this）}value={button.value}onSetActive={（）=>this.handleChangeActive（buttonIndex）}active={buttonIndex==activeIndex}title={button.title}key={button.key}/>）} ) } } 导出默认子对象 //父组件 从“React”导入React，{Component} 从“./Child”导入子项； 类父级扩展组件{ 建造师（道具）{ 超级（道具） 此.state={ 第一个值：1， 第二个值：3， 结果：“” } //this.add=this.add.bind（this）； } //计算输入值 添加=（）=>{ var{firstValue，secondValue，result}=this.state； 结果=第一个值+第二个值； 控制台日志（结果）； document.getElementById（“结果”）.innerHTML=result； } render（）{ 返回( //子组件使用道具在父组件内部使用 结果 ) } } 导出默认父级

我需要事件处理程序（Add）必须在子组件内部工作。 如何在类组件中使用道具来使用事件处理程序。 如何在react中调用子类组件中的父方法。 我试着使用道具，但不起作用。 根据子组件输入按钮，它必须获得结果。

检查此选项可能会有所帮助

    //child component
    import React, { Component } from 'react'
    const NavButton = ({ active, title, href, onSetActive }) => {
        return (
            <button
                className={active ? "btn btn-light regular-btn active" : "btn btn-light regular-btn"}
                href={href}
                onClick={onSetActive} >
                {title}
            </button>
        )
    }
    class Child extends Component {
        constructor(props) {
            super(props);
            this.state = {
                activeIndex: 1,
                buttons: [
                    {
                        title: "1",
                        key: 0,
                        value: 1
                    },
                    {
                        title: "3",
                        key: 1,
                        value: 3
                    }
                ]
            }
        }
       //It was changing active index
        handleChangeActive(newActiveIndex) {
            // console.log("Working");
            this.setState({ activeIndex: newActiveIndex });
        }
    
        render() {
            const { activeIndex } = this.state;
            return (
                <div>
                    <nav id="navbarMain">
                        <div className="navbar-nav flex-row">
                            {this.state.buttons.map((button, buttonIndex) =>
                                /* determine which nav button is active depending on the activeIndex state */
                                <NavButton onClick={() => this.investmentHandler.bind(this)} value={button.value} onSetActive={() => this.handleChangeActive(buttonIndex)} active={buttonIndex === activeIndex} title={button.title} key={button.key} />)}
    
                        </div>
                    </nav>
                </div>
            )
        }
    }
    
    export default Child
    
    
    // parent component
    import React, { Component } from 'react'
    import Child from './Child';
    class Parent extends Component {
        constructor(props) {
            super(props)
    
       

 this.state = {
            firstValue: 1,
            secondValue: 3,
            result: ''
        }
        
        // this.add = this.add.bind(this);
    }
//calculating the input values
    Add = () => {
        var { firstValue, secondValue, result } = this.state;

        result = firstValue + secondValue;
        console.log(result);
        document.getElementById("result").innerHTML = result;
    }
    render() {
        return (
            <>
//Child component is used inside the parent component using props

                <Child investmentHandler={this.add} />
                <p id="result">Result</p>
            </>
    
            )
        }
    }
    export default Parent

//子组件
从“React”导入React，{Component}
const NavButton=（{active，title，href，onSetActive}）=>{
返回(
{title}
)
}
类子扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动索引：1，
按钮：[
{
标题：“1”，
关键字：0，
价值：1
},
{
标题：“3”，
重点:1,，
价值：3
}
]
}
}
//它正在更改活动索引
handleChangeActive（newActiveIndex）{
//控制台日志（“工作”）；
this.setState（{activeIndex:newActiveIndex}）；
}
render（）{
const{activeIndex}=this.state；
返回(
{this.state.buttons.map（（button，buttonIndex）=>
/*根据activeIndex状态确定哪个导航按钮处于活动状态*/
this.props.investmentHandler（）}value={button.value}onSetActive={（）=>this.handleChangeActive（buttonIndex）}active={buttonIndex===activeIndex}title={button.title}key={button.key}/>）}
)
}
}
导出默认子对象
//父组件
从“React”导入React，{Component}
从“./Child”导入子项；
类父级扩展组件{
建造师（道具）{
超级（道具）
此.state={
第一个值：1，
第二个值：3，
结果：“”
}
//this.add=this.add.bind（this）；
}
//计算输入值
添加=（）=>{
var{firstValue，secondValue，result}=this.state；
结果=第一个值+第二个值；
控制台日志（结果）；
document.getElementById（“结果”）.innerHTML=result；
}
render（）{
返回(
//子组件使用道具在父组件内部使用
结果
)
}
}
导出默认父级

检查此选项是否有帮助

    //child component
    import React, { Component } from 'react'
    const NavButton = ({ active, title, href, onSetActive }) => {
        return (
            <button
                className={active ? "btn btn-light regular-btn active" : "btn btn-light regular-btn"}
                href={href}
                onClick={onSetActive} >
                {title}
            </button>
        )
    }
    class Child extends Component {
        constructor(props) {
            super(props);
            this.state = {
                activeIndex: 1,
                buttons: [
                    {
                        title: "1",
                        key: 0,
                        value: 1
                    },
                    {
                        title: "3",
                        key: 1,
                        value: 3
                    }
                ]
            }
        }
       //It was changing active index
        handleChangeActive(newActiveIndex) {
            // console.log("Working");
            this.setState({ activeIndex: newActiveIndex });
        }
    
        render() {
            const { activeIndex } = this.state;
            return (
                <div>
                    <nav id="navbarMain">
                        <div className="navbar-nav flex-row">
                            {this.state.buttons.map((button, buttonIndex) =>
                                /* determine which nav button is active depending on the activeIndex state */
                                <NavButton onClick={() => this.investmentHandler.bind(this)} value={button.value} onSetActive={() => this.handleChangeActive(buttonIndex)} active={buttonIndex === activeIndex} title={button.title} key={button.key} />)}
    
                        </div>
                    </nav>
                </div>
            )
        }
    }
    
    export default Child
    
    
    // parent component
    import React, { Component } from 'react'
    import Child from './Child';
    class Parent extends Component {
        constructor(props) {
            super(props)
    
       

 this.state = {
            firstValue: 1,
            secondValue: 3,
            result: ''
        }
        
        // this.add = this.add.bind(this);
    }
//calculating the input values
    Add = () => {
        var { firstValue, secondValue, result } = this.state;

        result = firstValue + secondValue;
        console.log(result);
        document.getElementById("result").innerHTML = result;
    }
    render() {
        return (
            <>
//Child component is used inside the parent component using props

                <Child investmentHandler={this.add} />
                <p id="result">Result</p>
            </>
    
            )
        }
    }
    export default Parent

//子组件
从“React”导入React，{Component}
const NavButton=（{active，title，href，onSetActive}）=>{
返回(
{title}
)
}
类子扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动索引：1，
按钮：[
{
标题：“1”，
关键字：0，
价值：1
},
{
//child component
import React, { Component } from "react";
const NavButton = ({ active, title, href, onSetActive }) => {
  return (
    <button
      className={
        active
          ? "btn btn-light regular-btn active"
          : "btn btn-light regular-btn"
      }
      href={href}
      onClick={onSetActive}
    >
      {title}
    </button>
  );
};
class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: 1,
      buttons: [
        {
          title: "1",
          key: 0,
          value: 1,
        },
        {
          title: "3",
          key: 1,
          value: 3,
        },
      ],
    };
  }
  //It was changing active index
  handleChangeActive(newActiveIndex) {
    // console.log("Working");
    this.setState({ activeIndex: newActiveIndex });
    this.props.investmentHandler();
  }

  render() {
    const { activeIndex } = this.state;
    return (
      <div>
        <nav id="navbarMain">
          <div className="navbar-nav flex-row">
            {this.state.buttons.map((button, buttonIndex) => (
              /* determine which nav button is active depending on the activeIndex state */
              <NavButton
                value={button.value}
                onSetActive={() => this.handleChangeActive(buttonIndex)}
                active={buttonIndex === activeIndex}
                title={button.title}
                key={button.key}
              />
            ))}
          </div>
        </nav>
      </div>
    );
  }
}

export default Child;


// parent component
import React, { Component } from 'react'
import Child from './Child';
class Parent extends Component {
    constructor(props) {
        super(props)

this.state = {
        firstValue: 1,
        secondValue: 3,
        result: ''
    }
    
    // this.add = this.add.bind(this);
}
//calculating the input values
Add = () => {
    console.log('Im here')
    var { firstValue, secondValue, result } = this.state;

    result = firstValue + secondValue;
    console.log(result);
    document.getElementById("result").innerHTML = result;
}
render() {
    return (
        <>
            <Child investmentHandler={this.Add} />
            <p id="result">Result</p>
        </>

        )
    }
}
export default Parent