reactjs - 如何从其他组件调用其他组件上的组件函数？ react

Question

目前，我正在做一个 React 项目。我想问一下:假设有 3 个组件:A、B 和 C。A 是我的容器，B 是输入容器，C 是输出容器。

这是我的组件 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

组件 B 是 SubmitComponent，组件 C 是 OutputComponent，我的 B 正在获取输入并将其保存为其状态:从 'react' 导入 React, { Component };

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>
        );
    }
}

我真的不知道如何将此状态发送给 C，以便 C 可以将 is 作为主题发布，请帮忙

Answer 1

如果您希望从其他组件调用方法，则必须将方法作为 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'});
  }
}

如果传递方法变得很棘手(例如，一个组件想要调用位于组件树中完全不同位置的组件的方法)，您可以考虑 context 。

但请注意 - 阅读我链接的文档，它会使您的代码更难理解和进入。