接受输入并将其输出到React js的扩展面板内部

时间:2018-11-28 15:52:40

标签: javascript reactjs material-ui

因此,我正在尝试通过Material UI扩展面板接受用户输入和输出,这是当前我必须要做的。但是我收到一个错误消息说this.props.GitInput不是一个函数

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import IdentificationField from './IdentificationField';
import DataGraph from './DataGraph';
import PropTypes from 'prop-types';

class AssociateIdentification extends Component {
  constructor() {
    super();
    this.state = {
      GitInput: '',
    };
    this.GitInput = this.GitInput.bind(this);
  }
  componentDidMount() {
    if (this.props.id !== 0) {
      this.GitInput();
    }
  }
  componentDidUpdate(_, prevState) {
    if (prevState.id !== this.state.id) {
      this.GitInput();
    }
  }
  GitInput() {
    this.props.GitInput(this.state.id);
   }
  render() {  
    return (
       <div>
        <input type="text" onChange={this.handleSubmit} />
        {this.state.GitInput}
      </div>
    );
  }

}


export default (AssociateIdentification);

我将其输出到一个单独的组件上。

import React from 'react';
import { MockGit } from './Constants';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import GitInput from './AssociateIdentification';

const GitData = () => {
  return (

    <ExpansionPanel>
      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
        <Typography> {MockGit} </Typography>
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
        <Typography>
          {GitInput}
        </Typography>
      </ExpansionPanelDetails>
    </ExpansionPanel>
  );
};

export default (GitData);

我知道这很简单,但是我正在努力使其正常工作。

0 个答案:

没有答案