Question

在React应用程序中，我在不同的类中有两个组件。我需要通过单击另一个类中的按钮来调用一个类中的函数。

changeTitle () {
  this.setState({header: 'New title' });
}

我尝试使用导入。

import Material  from './Material'

<Link to="/Material">  
<button className='button' id='button-1' />
<label className='label'>وحدة الوطن</label>

有什么想法吗？

Answer 1

假设在父组件Title.js和子组件Button.js中具有以下功能

    INSERT INTO prenotazione (
    "nominativo ","email ",data,orario_inizio,
    orario_fine,"oggetto ","nominativoi ",emaili,
    "nominativoe ",emaile,stanza)
    VALUES ('aaa aaaa','aaa@email.com','2018-10-04',
    '09:30','12:30','aaaaa','bbbb bbbb','bbbb@email.com','cccc 
    ccc','cccc@email.com',1);

因此，在Title.js中导入Button组件，并通过将changeTitle函数作为道具发送来调用Button

 changeTitle () {
      this.setState({header: 'New title' });
}

现在Button.js组件中的功能会像onClick = {this.props.functionFromParent}一样分配给按钮onClick，因此，当您在此处单击按钮时，它将触发父组件中的functionFromParent。这在react中称为回调

import Button from “./Button”;

 changeTitle () {
    //this function is called when the button is clicked in Button.js component
      this.setState({header: 'New title' });
}

 <Button onChangeTitle={this.changeTitle} />

确保像这样在构造函数中绑定changeTitle函数

   <button onClick={this.props.onChangeTitle} className='button' id='button-1' />

Answer 2

在材料类中，您可以只在渲染类或生命周期方法中调用changeTitle ()：

componentDidMount(){
    changeTitle()
}

反应如何在组件之间传递状态

2 个答案: