Question

我在标题下面添加到My react Component的所有内容都不起作用/不可点击/不起作用我没有遇到任何错误。类似的子组件似乎适用于其他组件。我使用了样式组件和材料-ui。这是我在Github上的代码 - ＆gt;您可以看到我的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上查找了所有可能的问题和答案。

请告诉我出错的地方。任何帮助表示赞赏。

Answer 1

此问题已解决

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

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

Top: 0, bottom: 0

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

归功于Edo Rivai。

某些Child React组件无法正常工作

1 个答案: