React JSX Onclick组件

Question

I'm new to coding I want to display my Form.jsx to my AddWord.jsx Form.jsx is a form Addword.jsx is a button in Addword.js onclick i have to display Form.jsx help me

//This is my code
import React from 'react'
import App from '../App'
import Form from './Form'

function AddWords() {
    return (
        <div>
           <button type="button" onclick="">Click Me!</button>
        </div>
    )
}

export default AddWords

Answer 1

Rearrange your code a little so that you can have a reusable button component, and a parent component ( App ) where both the form and the button sit.

In this example form visibility is stored in App state (using the useState React hook ) and a button handler is passed down to the button in its props to toggle that state true / false which shows/hides the form.

 // This example uses the the `useState` hook for // storing state const { useState, Fragment } = React; // A simple form component function Form() { return <div>Form</div>; } // AddWords is now a reusable button component // that accepts a button handler function, and some text // for the button. When `onClick` (don't forget that // it's camelCase) is called it calls the handler // that was passed down to it. function Button({ handleButton, text }) { return ( <div> <button type="button" onClick={handleButton} > {text} </button> </div> ); } function App() { // Initialise the state to false. `isFormVisible` is the // variable that holds the state, `setFormVisible` is the // function that allows us to update it. const [ isFormVisible, setFormVisible ] = useState(false); // The handler that we pass to the button. It toggles // the `isFormVisible` state from `true` to `false`, or // `false` to `true. function toggleForm() { setFormVisible((visible) => !visible); } // We return a fragment wrapping our child // Form and Button components. Note that we're // passing the toggleForm function and text down as // Button props. // The form is only visible if `isFormVisible` is true. return ( <Fragment> <Button handleButton={toggleForm} text="Click me!" /> {isFormVisible && <Form />} </Fragment> ); } // Render it ReactDOM.render( <App />, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div> 

Answer 2

You may convert your functional component to class component and your code will be more precise and readable. Here I have used state which is bind with this react app, if any change react dom element will render based on change.

One more thing I want mention here is {this.state.isVisible && <Form />} , in javascript if 1st part returns truthy the next part will execute otherwise not, so here if this.state.isVisible = true only then Form will be visible

import React, { Component } from "react";
import Form from "./Form";

class AddWords extends Component {
  state = {
    isVisible: false
  };

  handleClick = () => {
    this.setState({ isVisible: true });
  };

  render() {
    return (
      <div>
        <h1>AddWords</h1>
        <button onClick={this.handleClick}>Click Me!</button>
        {this.state.isVisible && <Form />}
      </div>
    );
  }
}

export default AddWords;