Как вызвать родительский метод в компоненте дочернего класса в react

ProgramBox

Как вызвать родительский метод в компоненте дочернего класса в react

Post author:admin
Запись опубликована:2 марта, 2023
Post category:Вопросы по программированию

#reactjs #react-native

Вопрос:

     //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 = resu<
    }
    render() {
        return (
            <>
//Child component is used inside the parent component using props

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

Мне нужен обработчик событий (Add), который должен работать внутри дочернего компонента.
Как использовать обработчик событий с использованием реквизитов в компонентах класса.
Как вызвать родительский метод в компоненте дочернего класса в react.
Я пытался использовать props, но он не работал.
На основе кнопки ввода дочернего компонента он должен получить результат.

1. Похоже, вы передаете this.add , но родительский метод определен с именем Add . Если вы сделаете заглавные буквы согласованными в любом случае, они должны быть доступны по реквизитам при передаче дочернему классу.

2. Да, как сказал Грег, чем вы можете получить доступ к этому методу в своем дочернем компоненте this.props.Add()

Ответ №1:

В дочернем классе ваш компонент NavButton имеет атрибут onClick, который вызывает onSetActive, поэтому вы можете вызвать investmentHandler для функции onSetActive:

 //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;

В родительском классе при получении реквизитов из дочернего класса вы вызывали «this.add», когда вы должны вызывать «this.Add»:

 // 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 = resu<
}
render() {
    return (
        <>
            <Child investmentHandler={this.Add} />
            <p id="result">Result</p>
        </>

        )
    }
}
export default Parent

Я внес несколько изменений, и код сработал для меня.

1. Как вызвать, если метод investmentHandler имеет event.target.value?

2. Я не понял вашего вопроса, можете ли вы отправить ссылку на скрипт?

3. Как вызвать метод investmentHandler внутри функции onClick. Я получаю сообщение об ошибке, как будто цель не определена.

Ответ №2:

Проверьте, может ли это помочь

  //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.props.investmentHandler()} 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 = resu<
    }
    render() {
        return (
            <>
//Child component is used inside the parent component using props

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