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

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

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

<强> 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')
)

其次，定义并绑定handleChange组件中使用的Registration函数，并提供相同的区域，如下所示：

<强> 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>
    )
  }
}

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

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

4 个答案: