我有一个表单有一个提交按钮.

我该怎么做呢?

组件A代码:

<form onSubmit={this.handleClick}>


handleClick(event) {
    this.setState({ decisionPage: true });
    event.preventDefault();
  };

控制显示内容的父组件:

return (
      <div>
      {this.props.decisionPage ?
        <div>
          <LoginPage />
        </div>
        :
        <div>
          <Decision showThanks={this.props.showThanks}/>
        </div>
      }
      </div>
    )

推荐答案

handleClick移动到父组件,并将其作为props 传递给子组件.

<LoginPage handleClick={this.handleClick.bind(this)}/>

现在在子组件中:

<form onSubmit={this.props.handleClick}>

通过这种方式提交表单将直接更新父组件中的状态.这假设您不需要访问子组件中更新的状态值.如果这样做,则可以将状态值作为props 从父对象传递回子对象.保持单向数据流.

<LoginPage  handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>

Reactjs相关问答推荐

获取this.props.match.params.id未定义

无法使用#13;或br将新行设置为文本区域'"&"<>

防止在Reaction中卸载

如何用Reaction做交互式的MathML?

在Reaction中单击并显示子组件延迟/动画

StyleX中的多语言支持

对搜索引擎优化来说,react 头盔的异步足够了吗?

状态更改是否卸载功能组件

如何获取用户在 GooglePlacesAutocomplete 中输入的文本?

Chart.js如何go 除边框

React 为什么标签导致 onClick 事件运行 2 次?

面临 React 模式中点击外部条件的问题

React Native - 如何处理错误带有有效负载的NAVIGATE操作..未被任何导航器处理?

如何初始化 redux 全局存储 preloadedState

将 useState 设置为组件内部的值

如何使图标适合 react-bootstrap 中的行元素

从 API 中提取映射数组后出现重复元素

setState 改变对象引用

从输入中获取数字时,react 计数器不会增加

单击当前子div时如何更改p标签的图像和样式?react