Question

我很擅长使用3张UI卡开发页面，例如结构，每张卡片有10到15个字段。最后有提交按钮，提交页面和摘要将显示在下一页。

为每张卡开发了3个组件和一个主要组件，当用户点击提交时，它将组合3个组件并提交按钮我想要所有3个组件的状态数据如何做出反应。

我可以使用回调或反应redux，这是最好的实现。请举一些例子。示例代码：

import React from 'react'
import { BrowserRouter as Router, Switch, Route, Link, withRouter } from 'react-router-dom'

import {store} from '../../index'
import '../../UX-UI-Components/desktop/css/commonUI.css'
import Card1 from './Card1'
import Card2 from './Card2'
import Card3 from './Card3'
import Button from '../../components/Button'
import { FormattedMessage } from 'react-intl'

class Main extends React.Component {

  render() {
     return (
    <div className="">
            <Card1 />
            <Card2 />
            <Card3 />           
            <Link to={'/Summary'}>
            <Button buttonType="primary" onClick = {this.submit} align="right">
                <label><FormattedMessage id="lbl_viewSummary"/></label>
            </Button>
            </Link>
            <Button buttonType="second" align="right">
                <label><FormattedMessage id="lbl-cancel"/></label>
            </Button>
    </div>
     );
  }
}
export default Main
===================================================================================
class Card1 extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
        d1:"",
        d2: "",
        ......
        d10:""
     }
  };

  render() {
     return (
            <Text onChange={(event) => this.setState({ d1: event.target.value })}>   
            <Text onChange={(event) => this.setState({ d2: event.target.value })}> 
            .....
            <Text onChange={(event) => this.setState({ d10: event.target.value })}>   


     );
  }
}

export default Card1

同样明智的另外两个卡类..我需要所有这些卡状态值在主类

谢谢

将孩子反应到父母沟通

0 个答案: