组件未在按钮单击时呈现 - ReactJS

Question

我目前正在开发一个反应应用程序。我有一个带按钮的顶栏，我想将 Registration 组件呈现给 onClick 函数。下面没有输出，我在这里遗漏了什么吗？

'use strict'

import React from 'react'
import Registration from 'Registration'


export default class Header extends React.Component {
  constructor (props) {
    super (props)
    this.handleClick = this.handleClick.bind(this)
  }


  handleClick () {
    <Registration />
  }

  render () {
    return (
      <div className='top-bar'>
        <div className='top-bar-left'>
          <ul className='menu'>
            <li className='menu-text'>SIS App</li>
            <li>
              <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
            </li>
          </ul>
        </div>
      </div
    )
  }
}

这是我的注册组件：

'use strict'

import React, {Component} from 'react'

export default class Registration extends Component {
  render () {
    let props = this.props
    let {edit} = props
    let handleChange = props.handleChange()
    return (
      <fieldset>
        <legend>Registration</legend>
        <input name='name'
               value={props['name']}
               type='text'
               placeholder='Your Name'
               onChange={handleChange}
        />
        <input name='email'
               value={props['email']}
               type='email'
               placeholder='Email'
               onChange={handleChange}
        />
        <input name='phone'
               value={props['phone']}
               type='tel'
               pattern={PhoneNumberPattern}
               placeholder='Phone'
               onChange={handleChange}
        />
      </fieldset>
    )
  }
}

还有我的 app.js：

'use strict'

import React from 'react'
import { render } from 'react-dom'
import Header from 'Header'

render(
  <div>
    <Header />
  </div>,
  document.getElementById('app')
)

Answer 1

你想渲染注册组件，但是你没有定义任何地方让它渲染，

import React from 'react'
import Registration from 'Registration'


export default class Header extends React.Component {
        constructor (props) {
          super (props)
          this.state = {
            registration: false
          }
          this.handleClick = this.handleClick.bind(this)
        }


        handleClick () {
          this.setState({registration: true})
        }

  render () {

    return (
      <div className='top-bar'>
            <div className='top-bar-left'>
              <ul className='menu'>
                <li className='menu-text'>SIS App</li>
                <li>
                    <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
                      <li>

                </ul>
                {this.state.registration ? <Registration/>: null}
            </div>
    )
  }
}

但是我想理想情况下，您希望在单击按钮时路由到您的注册组件，您可以在为您的注册组件定义路由后使用dynamic routing 做到这一点。

如果你想这样做，请参考 this solution

Answer 2

在handleClick 中，您可以像this.setState({ renderRegistration: true }) 这样更改状态，然后在render 函数中执行以下操作

if (this.state.renderRegistration) {
    return '<Registration />';
} else {
    // your existing code
}

Answer 3

你要更正两件事，首先你要在main.js中正确导入Header，如下：

ma​​in.js

'use strict'

import React from 'react'
import { render } from 'react-dom'
import Header from './Header.jsx'

render(
  <div>
    <Header />
  </div>,
  document.getElementById('app')
)

其次，在Registration组件中定义和绑定你正在使用的handleChange函数，并提供渲染区域，如下：

Header.jsx

'use strict'
import React from 'react'
import Registration from './Registration.jsx'

export default class Header extends React.Component {
        constructor (props) {
          super (props)
          this.state = { showRegistration: false }
          this.handleClick = this.handleClick.bind(this)
          this.handleChange = this.handleChange.bind(this)
        }

        handleClick(e) {
          this.setState({ showRegistration: true })
          console.log("The link was clicked");
        }

        handleChange(e) {
          console.log("handleChange was clicked");
        }

  render () {
    let registration = null;
        if (this.state.showRegistration) {
          registration = <Registration handleChange = {() => this.handleChange()}/>
        }
    return (
      <div className='top-bar'>
            <div className='top-bar-left'>
              <ul className='menu'>
                <li className='menu-text'>SIS App</li>
                <li>
                    <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
                    </li>
                </ul>
            </div>
       {registration}
      </div>
    )
  }
}

考虑app的布局，如下：

Answer 4

Header 组件将呈现到屏幕上的唯一内容是 render 函数中的内容。

这里的一种方法是有一个标志来控制是否显示Registration组件，由按钮点击事件控制。

我不知道你的注册组件需要去哪里，但试试这样的：

'use strict'

import React from 'react'
import Registration from 'Registration'


export default class Header extends React.Component {
  constructor (props) {
    super (props)
    this.state = { showRegistration: false }
    this.handleClick = this.handleClick.bind(this)
  }


  handleClick () {
    this.setState({ showRegistration: true })
  }

  render () {
    return (
      <div className='top-bar'>
        <div className='top-bar-left'>
          <ul className='menu'>
            <li className='menu-text'>SIS App</li>
              <li>
              <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
               <li>
            </ul>
        </div>
        {this.state.showRegistration && <Registration />}
      </div>
    )
  }
}