处理表格时遇到很大问题 Screen from Console
这是我的代码:
import React, { Component } from 'react';
import './BookRoomForm.css';
import { Row, Col, Input } from 'react-materialize';
class BookRoomForm extends Component {
constructor(props){
super(props);
this.state = {
date: '',
location: '',
duration: '',
charis: '',
};
}// end constructor
handleSubmit = (event) => {
event.preventDefault();
alert('Form has been Submitted!');
}//end handleSubmit
handleChange = (event) => {
console.log('inside handleChange');
this.setState({location: event.target.value});
console.log(this.state.location);
}//end handleChange
render () {
return (
<div>
<Row>
<Col className='Room-forms' s={12} m={12} l={12}>
<form onSubmit={this.handleSubmit}>
<Input s={12} m={6} l={3} name='dateField' type='date' label='Meeting Date' value={this.state.date} />
<Input s={12} m={6} l={3} name='locationField' type='select' label='Room Location' value={this.state.location} onChange={this.handleChange} >
<option value='London'>London</option>
<option value='Paris'>Paris</option>
</Input>
<Input s={12} m={6} l={3} type='select' label='Duration in Hours' value={this.state.duration}>
<option value='0.5'>0.5</option>
<option value='1'>1</option>
<option value='1.5'>1.5</option>
<option value='2'>2</option>
<option value='2.5'>2.5</option>
<option value='3'>3</option>
<option value='3.5'>3.5</option>
<option value='4'>4</option>
<option value='4.5'>4.5</option>
<option value='5'>5</option>
<option value='5.5'>5.5</option>
<option value='6'>6</option>
<option value='6.6'>6.5</option>
<option value='7'>7</option>
<option value='7.5'>7.5</option>
<option value='8'>8</option>
</Input>
<Input s={12} m={6} l={3} type='select' label='Number of Chairs' value={this.state.charis} >
<option value='5'>5</option>
<option value='10'>10</option>
<option value='15'>15</option>
</Input>
<Row>
<Input s={12} m={12} l={12} className='full-submit-button btn waves-effect waves-light' type='submit'></Input>
</Row>
</form>
</Col>
</Row>
</div>
);
}
}
export default BookRoomForm;
我检查了我的React和React-DOM版本(16.0.0),我删除了所有node_modules,然后通过package.json list(最新版本)安装它们。 实际上我在其他组件中使用setState方法:
componentDidMount() {
fetch('http://127.0.0.1:8000/meetings/?owner=1')
.then(results => {
return results.json();
}).then(data => {
let reservations = data.map(data => {
return (
<div key={data.url}>
<Row key={data.url} className='meeting-box'>
<Row className='meeting-title'>{data.title}</Row>
<Row>
<Col s={12} m={12} l={3} className='meeting-details'>
<Icon small className='meeting-icon'>event</Icon> {data.date}
</Col>
<Col s={12} m={12} l={3} className='meeting-details'>
<Icon small className='meeting-icon'>schedule</Icon> {data.start_time} - {data.end_time}
</Col>
<Col s={12} m={12} l={3} className='meeting-details'>
<Icon small className='meeting-icon'>event_seat</Icon> {data.room.name} in {data.room.location}
</Col>
<Col s={12} m={12} l={3} className='meeting-details'>
<div className ='button-space'><Button className='meeting-remove-button' waves='light'>X</Button></div>
<div className ='button-space'> <Button className='meeting-activate-button' waves='light'>CODE</Button></div>
</Col>
<Row >
<Col s={12} m={12} l={12} className='meeting-members'>
<Icon small className='meeting-icon'>vpn_key</Icon> TO GET THE CODE HERE CLICK BUTTON "CODE"
</Col>
</Row>
</Row>
</Row>
</div>
)
})
this.setState({reservations: reservations});
})
}
并且一切都很好。
我想知道我是否应该爆炸这个项目并从材料-ui开始。也许有人有解决这个问题的方法?