Question

我使用React Rating（https://github.com/dreyescat/react-rating）而且我不确定如何为我的2个评级的值设置状态。其他领域都很好。

我能够在控制台中显示值。我不知道如何在handleRatingChange（）中设置状态。

此外，当我在完成评级后填写其他字段时，评级会重置。

这是我的代码：

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>
    );
  }
}

Answer 1

为facilityRate评级添加初始评级属性，例如initialRating = {this.state.facilityRating}，然后为staffRate评级添加initialRating = {this.state.staffRating}。

<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} />

在你的州有一个默认值也很重要，因为在开始时，它将是未定义的。

constructor(props) {
    super(props)
    this.state = {
      form: {
        site: '',
        facilityRate: '', <-- Sets the initial value for facility
        staffRate: '', <-- Sets the initial value for staff
        theList: 'off'
      },
    }
  }

然后将您的评级功能分成两个功能。

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。

可以设计一个单独的功能来处理这两个功能，但由于你是一个很新的反应，我不想立刻向你扔太多。

这些函数添加了一个扩展运算符来复制状态，然后使用新的“rating”值更新密钥'facilityRating'或'staffRating'。我也在这里做一个lambda来处理绑定。

看起来您的表单正在重置，因为您正在替换状态而不是添加状态。再次使用扩展运算符。

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组件时如何设置值的状态？

1 个答案: