如何在其他组件上调用组件函数，但是从其他组件调用？ 应对

Question

Currentl, I am doing a React project. I want to ask: lets say there are 3 components, A,B, and C. A is my container, B is the input one, and C is the output one.

this is my component A :

import React, { Component } from 'react';
import './App.css';
import {SubmitComponent} from './submitComponent.js'
// import {OutputCo} from './TopicsContainer.js'

const containerStyle = {
  border: '2px solid black',
  width: '70%',
  height: 'auto',
  marginLeft: 'auto',
  marginRight: 'auto',
  marginBottom: '100px',
};

class App extends Component {
  render() {
    return (
      <div style={containerStyle}>
        <h1 style={{textAlign:'center'}}>Coding Exercise</h1>
        <hr />
        <SubmitComponent />
        <OutputComponent />

      </div>
    );
  }
}

export default App

Component B is SubmitComponent, component C is OutputComponent, my B is taking the input and save it as its state : import React, { Component } from 'react';

import React, { Component } from 'react';
const createstyleouter ={
    border : '2px solid #AAA',
    width : '98%',
    height: 'auto',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop:'35px',
    marginBottom:'50px',
};

const createstyleinner ={
    // border: '2px solid blue',
    marginLeft: 'auto',
    marginRight: 'auto',
    marginTop: '10px',
    width: '98%',

}

export class SubmitComponent extends Component {


    constructor(props) {
        super(props);
        this.state = {
            title: '',
            desc: ''
        }
        this.newTitle = this.newTitle.bind(this);
        this.newDesc = this.newDesc.bind(this);
    }

    newTitle(e) {
        this.setState({
            title: e.target.value
        });
    }

    newDesc(e) {
        this.setState({
            desc: e.target.value
        });
    }

    render() {
        return (
            <div style={createstyleouter}>
                <div style={createstyleinner}>
                    <p><strong>Title:</strong></p>
                    <textarea style={{width:'100%', height:'20', fontSize:'17px'}} onChange={this.newTitle} maxLength='150' value={this.state.title} placeholder="Enter your topic's title"></textarea>
                    <p>Description:</p>
                    <textarea style={{width:'100%', height:'70', fontSize:'17px'}} onChange={this.newDesc} maxLength='150' value={this.state.desc} placeholder="Enter your topic's description'"></textarea>
                    <button style={{padding: '10px', marginBottom:'10px'}}>Submit</button>
                </div>
            </div>
        );
    }
}

I literally did not have any idea how to send this state to C so C can post is as the topic, Please help

Answer 1

If you wish to call method from other components, you have to pass method around as props .

class Parent extends Component {
  render() {
    return (
      // pass method as props to Child component
      <Child parentMethod={this.parentMethod}/>
    );
  }

  parentMethod() {
    console.log('Hello World');
  }
}

class Child extends Component {
  render() {
    return (
      <button onClick={this.handleClick}>Fire parent method</button>
    );
  }

  handleClick() {
    // parent method passed to child is now available as props
    // you can call it now & even pass arguments if you like
    this.props.parentMethod('foo', 'bar', 2, ['foo', 'bar'], {foo: 'bar'});
  }
}

If passing around methods gets tricky (eg one component wants to call a method of component that is in a totally different place in your component tree), you could consider context .

But be warned - read the docs I linked, it makes your code harder to understand and get into.

Answer 2

您需要提升状态，以便状态作为从容器到子组件的道具传递。

Answer 3

Let us say you have a structure

class A
{
getResponse:function(res)
{
set you state//
this.setState({
state:res
})

}
<B state={this.state} callback={this.getResponse}/>
<C state={this.state}  />//state is the updated state by function callback

}

in Component B you need to call function callback as

class B
{
callAComponent:function(res)
{
this.props.callback(res)

}
render{

return(

<input type="text" onChange={this.callAComponent}//whaever event you are performing
)

}
}

Now send the update state in C component

Answer 4

In the constructor of the parent:

this.childElement = React.createRef();

In your child element in the parent:

<Child ref = {this.childElement}>

To call a method of the child use:

this.childElement.current.aFunctionInChildClass();

For more information in react documentation/refs and the dom