时间戳

首页 > 解决方案 > 如何从另一个组件访问一个组件的状态？

reactjs - 如何从另一个组件访问一个组件的状态？

问题描述

在我的 react-native 应用程序中，我有一个输入表单组件和一个按钮组件。当用户按下按钮但数据存在于表单组件中时，我想将登录信息发送到我的服务器。

如何从按钮组件访问表单的状态。

标签： reactjsreact-native

解决方案

解决问题的一种更聪明的方法是在按钮组件上公开一个 onclick 属性，并将附加到表单对象的事件提供给它。向服务器发送 AJAX 请求，您的问题就解决了。

示例按钮组件

  import React from 'react';

  class PokePagerButton extends React.Component {
      render() {
          let {text, tooltip, onClick, currentPage, value, isVisible = true} = this.props;

          return(
              <button className={'poke-pager-button ' 
                                      + (currentPage === text ? ' active' : ' ')
                                      + (isVisible ? ' ' : ' hidden')}
                      onClick={onClick}
                      title={tooltip}
                      value={value}>{text}</button>
          );
      }
  }

  export default PokePagerButton;

样品消耗

 class PokeForm extends React.Component {
   onPagerButtonClick() {
       const request = await fetch ('/echo/json', {
            headers: {
                'Content-type': 'application/json'
            },
            method: 'POST',
            body: { a: this.state.pokedata }
      });
   }
   render() {
      <PokepagerButton onClick={this.onPagerButtonClick} />
   }
 }

推荐阅读