一些 Child React 组件不工作

Question

我在 header 下面添加到我的反应组件中的所有内容都没有 functional/not clickable/not 工作我没有遇到任何错误。类似的 child 组件似乎适用于其他组件。我使用了样式组件和 material-ui。这是我在 Github 上的代码 --> 你可以看到我的 Contact_Us 组件 https://github.com/SamkitS/showell/blob/master/src/components/Contact_Us.js

      class Contact extends React.Component {
constructor (props) {
    super(props);
    this.state = {
        markers: [{
            position : {
                lat:19.204729,
                lng: 72.836778,
            }
        }]
    }
}


render () {
    return (
    <Wrapper >

        <header>

        <MuiThemeProvider muiTheme={getMuiTheme()}>
        <CommonBar />
        </ MuiThemeProvider>
        </header>
        <Banner>
         <h1> Contact Us </h1>
        </Banner>
        <PleaseFill> Lets do business together! Send us a Message.

        </PleaseFill>
        <Fields>
        <MuiThemeProvider muiTheme={getMuiTheme()}>
        <TextField
        floatingLabelText="Please enter your full name"
        hintText = "Full Name"
        fullWidth={true}
        type = "text"
         />
        </ MuiThemeProvider>
         <br/>

         <MuiThemeProvider muiTheme={getMuiTheme()}>
         <TextField
        floatingLabelText="Please enter your contact number"
        hintText = "Number"
        fullWidth={true}
        type = "number"

         />
         </ MuiThemeProvider>
         <br/>
         <MuiThemeProvider muiTheme={getMuiTheme()}>
         <TextField
        floatingLabelText="Please enter your email id"
        hintText = "Email Id"
        fullWidth={true}


         />
         </ MuiThemeProvider>
         <br/>
         <MuiThemeProvider muiTheme={getMuiTheme()}>
         <TextField
        floatingLabelText="Enter your message"
        hintText = "Message Body"
        multiLine={true}
        rows ={5}
        fullWidth={true}

         />
         </ MuiThemeProvider>
         <br/>
         <br/>
         <br/>
         <Button>
         <MuiThemeProvider muiTheme={getMuiTheme()}>
        <RaisedButton label="Send" primary={true} style = {{ width: '16rem', height: '3.25rem',}} labelStyle = {labelStyle} />
        </ MuiThemeProvider>
        </Button>


        </ Fields>

        <ContactFooter>
            <Mapnew>
            <MapWithControlledZoom
    containerElement = {
        <div style = {{height: "100%", }} />
    }
    mapElement = {
        <div style = {{height: "100%"}} />

      }
          markers = {this.state.markers}

        />
            </ Mapnew>
            </ContactFooter>
          </ Wrapper>
        );
     }
   }

    export default Contact;

是的，我导入了所有必要的东西。是的，我已经在 Whosebug 上查找了所有可能的问题和答案。

请让我知道哪里做错了。感谢任何帮助。

Answer 1

此问题已解决

问题是我的页眉覆盖了整个页面。一切都是 "behind" 不可见的 div，所以当我点击时，我点击的是不可见的 div，而不是隐藏在后面的文本字段。

样式 CSS div 中的这些代码引起了问题

Top: 0, bottom: 0

当我删除这些线时，一切恢复正常。

归功于 Edo Rivai。

一些 Child React 组件不工作

Some Child React Components not working

javascript

reactjs

styled-components