Question

如何使用React在子组件中单击按钮时显示一组数组？

由于我是React的新手，所以我一直在努力显示文本不警报或其他。下面是我到目前为止编写的代码。

class HomeViewModel @Inject constructor(private val homerepository: Homerepository) :
    BaseViewModel() {
    fun getProducts() {
        compositeDisposable.add(
            homerepository.getProducts()
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .doOnSubscribe { }
                .doOnTerminate { }
                .subscribe({}, {})
        )
    }

    fun getProductsFromDb(){
        compositeDisposable.add(
            homerepository.getProductsDb()
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .doOnSubscribe {  }
                .doOnTerminate {  }
                .subscribe({},{})
        )
    }
}

我想要显示结果的子组件上有一个按钮。

import React, { Component } from 'react'
import LandingComponent from './LandingComponent'

class EmployeeList extends Component {
constructor(props) {
    super(props)

    this.state = {
         Employee : [
             {
                 ID: 1,
                 FirstName: 'Nancy',
                 LastName: 'Davolio',
                 Address: '507',
                 City: 'Seattle,WA',
                 PostalCode: '98122',
                 COuntry: 'USA'
             },
             {
                ID: 2,
                FirstName: 'Margaret',
                LastName: 'Peacock',
                Address: '507',
                City: 'Seattle,WA',
                PostalCode: '98122',
                COuntry: 'USA'
            }]}
            }
              showEmpList() {
              return {Employee: this.state.Employee}
}
             render() {
             return (
             <div>      
             <LandingComponent ListHandler={this.showEmpList}/>
            </div>
            )
       }
     }
                 export default EmployeeList

Answer 1

放置一个变量以声明是否显示员工列表：

this.state = {
    ...
    showEmployeeList: false
}

声明一个将切换showEmployeeList的函数：

showEmpList () {
    this.setState({
        showEmloyeesList: !this.state.showEmployeesList,
    })
}

编写一个将呈现雇员的函数：

renderEmloyees (employees) {
    return (
        <div>
          {employees.map(e => (
            <div key=e.ID>
              {e.FirstName}
            </div>
          ))}
        </div>
  )
}

如果showEmployeeList是true，请渲染员工：

<LandingComponent ListHandler={this.showEmpList}/>
{this.state.showEmployeeList && renderEmployees(this.state.Employee)}

如何使用React在子组件上单击按钮时显示一组数组

1 个答案: