单击按钮时未呈现的组件 - 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后使用dynamic routing进行操作。

如果您希望这样做，请参阅此解决方案

Answer 2

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

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

Answer 3

您的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>
    )
  }
}

Answer 4

你必须纠正两件事，首先你必须在main.js正确导入Header ，如下所示：

main.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>
    )
  }
}

考虑到应用程序的布局，如下所示：