Question

React的新手，我想让一个组件的按钮通过在另一个组件中调用一个函数来打开常规模式。最终，我希望导航栏上有一个按钮，引导卡上有一个按钮，当单击它时，它将在单独的组件中打开一个模式。我尝试使用ref = {}，但我不明白我希望他们是另一种方式。这是我的简单代码，我希望其中的ClickButton.js中的按钮打开Header.js中的Modal。移交ClickButton父对象时，必须添加它，并添加两个按钮。如何仅获取CLickButton.js的按钮来访问Headerjs中的切换功能。不会导致如下图所示呈现两个按钮？

char * ciphercalc(char  *text, char *key) 
//  OR you want to use string type: char * ciphercalc(string  text, string key)
{
    size_t length = strlen(text);
    char *characters = malloc(length+1);

    //verify the return value of malloc function
    if(!characters) {return NULL;}
    int i;
    for (i = 0; i < 26 && i < length; i++) {
       // your code
    }

    characters[i] = '\0';
    return characters;
}

这是模态

import React, { Component } from 'react';
import {Button} from 'reactstrap';
import Header from './Header';

class ClickButton extends Component {

  constructor(props) {
    super(props);

    this.state = {

    };
  }

  onClicker = (props) => {
   this.props.toggleModal(); 
  }
  render( ) {
    return (
      <div>
        <Button onClick={this.onClicker} color="primary">OtherComponentButton</Button>
      </div>
    );
  }
}

export default ClickButton;

这是显示两个按钮的图像。我如何只显示一次CLickButton按钮。

Answer 1

要访问类方法中的道具，您可能需要将类方法显式绑定到实例。

  render( ) {
    return (
      <div>
        <Button onClick={this.onClicker.bind(this)} color="primary">OtherComponentButton</Button>
      </div>
    );
  }

或者您也可以直接调用prop方法

  render( ) {
    return (
      <div>
        <Button onClick={this.props.toggleModal} color="primary">OtherComponentButton</Button>
      </div>
    );
  }

Answer 2

不确定我是否理解该问题，但是那又如何呢？

ClickButton：

class ClickButton extends Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.handleClick();
  }

  render() {
    return <button onClick={this.handleClick}>OtherComponentButton</button>;
  }
}

模式：

class Header extends Component {
  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.props.handleClick();
  }

  render() {
    return (
      <>
        <Modal isOpen={this.props.modal}>
          <ModalBody>
            <Form>
              <FormGroup>
                <Label for="exampleEmail">Name</Label>
                <Input
                  type="email"
                  name="email"
                  id="exampleEmail"
                  placeholder="Enter Name"
                />
              </FormGroup>
            </Form>
          </ModalBody>
          <Button onClick={this.onClick}>Close</Button>
        </Modal>
        <Button onClick={this.onClick}>ModalComponent</Button>
      </>
    );
  }
}

App组件定义state.modal属性，并通过props将其提供给Modal，还定义了ClickButton和Modal中用于管理state.modal的handleToggle：

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false,
    };

    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle() {
    this.setState({
      modal: !this.state.modal,
    });
  }

  render() {
    return (
      <div>
        <Header modal={this.state.modal} handleClick={this.handleToggle} />
        <ClickButton handleClick={this.handleToggle} />
      </div>
    );
  }
}

如何只将一个组件的功能传递给另一个组件而不渲染它

2 个答案: