反应验证：在两个不同的组件中验证相同的表单

Question

我正在使用材料-ui反应。

我有三个组成部分：

1. FieldsComponent - 保存表单字段。
2. CreateComponent - 具有FieldsComponent和提交按钮
3. UpdateComponent - 具有FieldsComponent和更新按钮

如何在创建/更新组件上单击提交/更新按钮时验证FieldsComponent？

有更好的方法吗？

编辑：一些代码......

The Fields：

class PlaceFields extends Component {

    render() {

        return(
            <div className="PlaceFields">
                <TextField
                    ref="placeName"
                    floatingLabelText="Place name"
                />
                <br/>
                <TextField
                    ref="placeAddress"
                    floatingLabelText="Place address"
                />
                <br/>
                <TextField
                    floatingLabelText="More details"
                    multiLine={true}
                    rows={2}
                    rowsMax={4}
                    style={{textAlign: 'left'}}/>
                <FlatButton
                    label="Choose an Image"
                    labelPosition="before"
                    className="uploadButton"
                    containerElement="label"
                >
                    <input type="file" className="uploadInput" />
                </FlatButton>
            </div>
        );
    }

}

第一次使用Fields（第二次使用在PlacesCard中，如下所示..

class App extends Component {

...

return (

            <MuiThemeProvider>
                <div className="App">
                    <div className="cardsContainer">
                        <PlacesCard/>
                    </div>
                    <FloatingActionButton
                        className="AddPlaceFAB"
                        onTouchTap={this.handleOpen}
                    >
                        <ContentAdd />
                    </FloatingActionButton>
                    <Dialog
                        title="Create a place"
                        actions={actions}
                        modal={true}
                        open={this.state.open}
                    >
                        <PlaceFields/>
                        <RaisedButton label="Create" primary={true}/>
                    </Dialog>
                </div>
            </MuiThemeProvider>
        );
}

在PlacesCard中第二次使用：

const PlacesCard = () => (
    <Card className="card">
        <CardHeader
            className="cardHeader"
            title="Place name"
            subtitle="address"
            actAsExpander={true}
            showExpandableButton={true}
        />

        <div expandable={true}>
            <PlaceFields/>
            <CardActions>
                <RaisedButton label="Save" primary={true}/>
            </CardActions>
        </div>
    </Card>
);