一些子反应组件不工作答案

【问题标题】：Some Child React Components not working一些子反应组件不工作
【发布时间】：2018-10-01 23:42:00
【问题描述】：

我在标题下方添加到我的反应组件的所有内容都不起作用/不可点击/不起作用我没有遇到任何错误。类似的子组件似乎适用于其他组件。我使用了样式化的组件和 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;

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

请让我知道我哪里出错了。任何帮助表示赞赏。

【问题讨论】：

你的项目中没有 package.json
@TomaszMularczyk - 我已将它们添加到我的存储库中，请检查。非常感谢您指出这一点，我总是使用纱线
@TomaszMularczyk 如果你想查看的话，我已经添加了 package.json

标签： javascript reactjs styled-components

【解决方案1】：

此问题已解决

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

样式化 CSS div 中的这些代码导致了问题

Top: 0, bottom: 0

当我删除这些行后，一切恢复正常。

归功于 Edo Rivai。

【讨论】：