在我的表单中使用react-rating组件时如何设置值的状态? [英] How to set state of the value when using react-rating component in my form?
问题描述
我正在使用React Rating( https://github.com/dreyescat/react-rating ) 而且我不确定如何为我的2个评分设置值的状态.其他领域都很好.
I'm using React Rating (https://github.com/dreyescat/react-rating) and I'm not sure how to set state for the values for my 2 ratings. The other fields are fine.
我能够获取要在控制台中显示的值.我不知道如何在handleRatingChange()中设置状态.
I'm able to get the values to show in console. I don't know how to set state in handleRatingChange().
此外，当我完成评分后填写其他字段时，评分也会重置.
Also, when I fill out the other fields after I have done the ratings, the ratings resets.
这是我的代码:
var Rating = require('react-rating')
class Assignment extends Component {
constructor(props) {
super(props)
this.state = {
form: {
site: '',
facilityRate: '',
staffRate: '',
theList: 'off'
}
}
}
handleChange(event) {
const formState = Object.assign({}, this.state.form);
formState[event.target.name] = event.target.value;
this.setState({ form: formState });
console.log(formState);
}
handleRatingChange(rating) {
console.log('rating', rating);
}
render() {
return (
<Grid>
<PageHeader id='header'>
Track your assignment <small className='subtitle'>Let us make a record of your assignment.</small>
</PageHeader>
<form id='assignment-form'>
<h3>Record your assignment</h3>
<Row>
<Col xs={5} md={5}>
<FormGroup>
<ControlLabel id='site'>Site Name</ControlLabel>
<FormControl type='text' name='site'
onChange={this.handleChange.bind(this)}
value={this.state.form.site}
/>
</FormGroup>
<FormGroup>
<ControlLabel id='facilityRate'>Rate the Facility</ControlLabel><br />
<Rating
name='facilityRate'
emptySymbol={<img src='../star-empty.png' className='icon' alt='empty star' />}
fullSymbol={<img src='../star-full.png' className='icon' alt='filled star' />}
onChange={this.handleRatingChange} />
</FormGroup>
<FormGroup>
<ControlLabel id='staffRate'>Rate the Staff</ControlLabel><br />
<Rating
name='staffRate'
emptySymbol={<img src='../star-empty.png' className='icon' alt='empty star' />}
fullSymbol={<img src='../star-full.png' className='icon' alt='filled star' />}
onChange={this.handleRatingChange} />
</FormGroup>
<FormGroup>
<ControlLabel id='theList'>The List
<br /><i>Add it to my favorites.</i>
</ControlLabel><br />
<Checkbox
name='theList'
checked={this.state.theList}
onChange={this.handleChange.bind(this)}>Add to The List
</Checkbox>
</FormGroup>
</Col>
</Row>
<Row>
<Col xs={5} md={5}>
<Button type='submit' className='btn btn-secondary' id='submit'>Submit Assignment</Button>
</Col>
</Row>
</form>
</Grid>
);
}
}
推荐答案
添加一个初始评级属性，例如对于facilityRate Rating添加initialRating = {this.state.facilityRating}，然后为它添加initialRating = {this.state.staffRating} staffRate评分.
Add an initial rating property, for example initialRating={this.state.facilityRating} for the facilityRate Rating and then initialRating={this.state.staffRating} for the staffRate Rating.
<Rating name='facilityRate'
emptySymbol={<img src='../star-empty.png'
className='icon' alt='empty star' />}
initialRating={this.state.form.facilityRate}
fullSymbol={<img src='../star-full.png' className='icon'
alt='filled star' />}
onChange={this.handleStaffRatingChange} />
<Rating name='staffRate'
emptySymbol={<img src='../star-empty.png'
className='icon' alt='empty star' />}
initialRating={this.state.form.staffRate}
fullSymbol={<img src='../star-full.png' className='icon'
alt='filled star' />}
onChange={this.handleStaffRatingChange} />
在您的状态中使用默认值也很重要，因为一开始它是不确定的.
It's also important to have a default value in your state, since at the beginning, it's going to be undefined.
constructor(props) {
super(props)
this.state = {
form: {
site: '',
facilityRate: '', <-- Sets the initial value for facility
staffRate: '', <-- Sets the initial value for staff
theList: 'off'
},
}
}
然后将您的评分功能分为两个功能.
Then split your rating function into two functions.
handleStaffRatingChange = (rating) => {
this.setState({...this.state, form: {...this.state.form, staffRate: rating}});
}
handleFacilityRatingChange = (rating) => {
this.setState({...this.state, form: {...this.state.form, facilityRate: rating}});
}
我们这样做的原因是为了使每个功能都可以更改状态中的特定区域.每个等级都必须查看状态以确定其值是什么，因此它们不能是该状态中的相同值. handleStaffRatingChange的目标是this.state.form.staffRate，handleFacilityRatingChange的目标是this.state.form.facilityRate.
The reason we did this is so that each function will alter a specific area in the state. Each rating has to look at the state to determine what it's value is, therefore they cannot be the same value in the state. The handleStaffRatingChange targets this.state.form.staffRate and handleFacilityRatingChange targets this.state.form.facilityRate.
可以设计一个函数来同时处理这两个函数，但是由于您反应起来还很陌生，所以我不想一次向您扔太多东西.
It is possible to design a single function to handle both, but since you're fairly new to react, I'm don't want to throw too much at you at once.
这些函数正在添加一个散布运算符以复制状态，然后使用新的值"rating"更新键"facilityRating"或"staffRating".我也在这里做lambda来处理绑定.
These functions are adding a spread operator to copy the state and then update the key 'facilityRating' or 'staffRating' with the new value of 'rating'. I'm also doing a lambda here to take care of binding.
看起来您的表单正在重置，因为您要替换状态而不是添加状态.再次使用点差运算符.
It also looks like your form is reseting because you're replacing the state instead of adding to it. Use the spread operator again.
handleChange(event) {
const formState = Object.assign({}, this.state.form);
formState[event.target.name] = event.target.value;
this.setState({ ...this.state, form: formState });
console.log(formState);
}
这篇关于在我的表单中使用react-rating组件时如何设置值的状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
