在我的表单中使用 react-rating 组件时如何设置值的状态？

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 Rating 添加 initialRating={this.state.facilityRating}，然后为 staffRate Rating 添加 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);
    }