我如何使用React按钮调用组件？

Question

如何使用onClick从react按钮调用我的“调查”组件？我正在使用“ onClick = {Survey}”，但是它不起作用，还有另一种方法可以执行，或者这种调用有问题。

class App extends Component {
  render() {
    return (
        <div className="App">
                <Container>
                  <Row>
                    <Col><ClientInformation /></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2 </Col>
                    <Col>2 of 2</Col>
                  </Row>
                  <Row>
                    <Col><Button variant="outline-primary" size="lg" block>QR Code
                 </Button></Col>
                    <Col><Button variant="outline-success" size="lg" block onClick={Survey} >Survey</Button></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2</Col>
                    <Col>2 of 2</Col>
                  </Row>
                  <Row>
                    <Col><Button variant="outline-warning" size="lg" block>Warning</Button></Col>
                    <Col><Button variant="outline-secondary" size="lg" block>Secondary</Button></Col>
                  </Row>
                  <Row>
                    <Col>1 of 2</Col>
                    <Col>2 of 2</Col>
                  </Row>
                </Container>
            </div>
        </div>
        );
      }
    }

    export default App;

Answer 1

onClick是一个事件处理程序，它是一个被用来做某事的函数... React中不存在任何内置功能，这些内置功能允许您将组件直接提供给该函数并期望它知道该如何处理以及何时处理。

您需要做的是在您的状态下存储一段数据，您可以用它来conditionally render该组件。

[我注意到您用react-router标记了这个问题。如果您在谈论如何为特定路线提供组件，则需要导入其内置的Route，Switch和Link组件，并在[ C0]。他们提供component。

Answer 2

我认为您对onClick处理程序有误解。它要求功能不反应组件或对象。请使用此。

Route

然后，请添加样式以设置适当的位置并为您的Survay组件显示。