reactJs中的组件

Question

I am working on react and want to specify href link to another component in react js. Below is the href attribute I am working on and want to redirect to another component named MenuForm. This component has form for menu input. I want the form to be open after I click Menu link.

<a href="#" className="btn btn-primary">Menu</a>

Component I want to redirect is MenuForm <MenuForm />

Answer 1

You need to maintain a state to show/hide your form:

class MyComponent extends Component {
  state = {
    showForm: false
  }

  handleClick = event => {
    event.preventDefault()
    this.setState({showForm: true})
  }

  render() {
    return (
      <a href="#" onClick={this.handleClick} className="btn btn-primary">Menu</a>
      // ...
      {this.state.showForm && <MenuForm />}
    )
  }
}

If you use React hooks , it's even simplier:

function MyComponent() {
  const [showForm, setShowForm] = useState(false)

  function handleClick(event) {
    event.preventDefault()
    setShowForm(true)
  }

  return (
    <a href="#" onClick={handleClick} className="btn btn-primary">Menu</a>
    // ...
    {showForm && <MenuForm />}
  )

}

Answer 2

If you are using react-router-dom and want the url to change when you click the link, you can setup your router like this,

// router.js
import { BrowserRouter, Route } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <Route path="/here" component={HereComponent} />
    <Route path="/there" component={ThereComponent} />
  </BrowserRouter>,
);

Then you should be able to Use the Link Component like,

import { Link } from 'react-router-dom';
<Link to="/there">there</Link>

This will load the component and change the browser URL. You can read more about react-router-dom here: https://reacttraining.com/react-router/web/guides/quick-start