Question

很抱歉，如果该主题可能是另一个主题的副本，但是我仍然有一些疑问，我无法解决阅读此相关主题的问题：

onClick doesn't render new react component.

如何使用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组件，并以{ component上的{1}}道具。他们提供an example。

Answer 2

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

import Survay from './survay'; // use correct path of the survay component

class App extends Component {
  state = {
   display: false,
 }
  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={()=>{this.setState({display: true})} >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>
                  {
                   display && 
                   <Survey/>
                   }
                </Container>
            </div>
        </div>
        );
      }
    }

    export default App;

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

如何使用反应按钮调用组件？

2 个答案: