Question

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

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

Answer 1

解决问题的一种更智能的方法是在按钮组件上公开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} />
   }
 }

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

1 个答案: