[英]How solve React problem (TypeError: Cannot read property 'showModel' of null)
Here is show that how set attribute showModel
and give it false
:这里显示了如何设置属性
showModel
并给它false
:
Main.js主.js
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import UserDataModel from './UserDataModel';
class Main extends React.Component {
constructor(props) {
super(props);
this.State = {
userName: '',
userHeight: '',
likeCats: false,
breed: '',
showModel: false
}
}
submitForm = async (event) => {
event.preventDefault();
let form = event.target;
await this.setState({
userName: event.target.userName.value,
userHeight: event.target.userHeight.value,
likeCats: event.target.likeCats.checked,
breed: event.target.breed.value,
showModel: true
})
form.reset();
console.log(this.state.userHeight, "userNamennnnnnnnnnnnnnnnnnnnnnn");
}
handleClose = () => {
this.setState({
showModel: false
})
}
render() {
return (
<div>
<h2>Form popup</h2>
<Form onSubmit={this.submitForm}>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Name</Form.Label>
<Form.Control name="userName" type="text" placeholder="Enter Name" />
<Form.Label>Height</Form.Label>
<Form.Control type="text" name="userHeight" placeholder="Height" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check name="likeCats" type="checkbox" label="do you love food " />
</Form.Group>
<Form.Select name="breed" aria-label="Default select example">
<option>What is your favorate?</option>
<option value="1">Shawrma</option>
<option value="2">mansaf</option>
<option value="3">shorba</option>
</Form.Select>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
<UserDataModel
showModel={this.state.showModel}
handleClose={this.handleClose}
userName={this.state.userName}
userHeight={this.state.userHeight}
likeCats={this.state.likeCats}
breed={this.state.breed}
/>
</div>
)
}
}
export default Main
UserDataModel.js用户数据模型.js
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
class UserDataModel extends React.Component {
render() {
return (
<div>
<Modal show={this.props.showModal} onHide={this.props.handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{this.props.userName}</p>
<p>{this.props.userHeight}</p>
<p>{this.props.breed}</p>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.props.handleclose}>
Close
</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
export default UserDataModel
In the constructor of your class component, you've used capital letter of State
.在 class 组件的构造函数中,您使用了大写字母
State
。 Change it to small letter:改成小写:
constructor(props) {
super(props);
this.state = {
userName: '',
userHeight: '',
likeCats: false,
breed: '',
showModel: false
}
}
Also when you're setting the state
, you should use spread javascript syntax for not changing the whole state. So change your setState
to:此外,当您设置
state
时,您应该使用spread javascript语法来不更改整个 state。因此将您的setState
更改为:
await this.setState({
...this.state,
userName: event.target.userName.value,
userHeight: event.target.userHeight.value,
likeCats: event.target.likeCats.checked,
breed: event.target.breed.value,
showModel: true
})
And:和:
handleClose = () => {
this.setState({
...this.state,
showModel: false
})
}
EDIT:编辑:
Another problem which exist in your code is that you've passed showModel
in Main.js
as props for the Modal
component.您的代码中存在的另一个问题是您已经在
Main.js
中传递了showModel
作为Modal
组件的道具。 But in this line you've got showModal
:但是在这一行中你有
showModal
:
<Modal show={this.props.showModal} onHide={this.props.handleClose}>
So change it to:所以将其更改为:
<Modal show={this.props.showModel} onHide={this.props.handleClose}>
There is a difference between a
and e
! a
和e
是有区别的!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.