Question

我使用React Rating（https://github.com/dreyescat/react-rating）而且我不确定如何使用获取我的评级值。我所有其他领域都在运作。我输入一个console.log来查看它们的值已经改变了。

当我尝试点击星标来评估设施时，我收到以下错误：

TypeError：undefined不是对象（评估＆＃39; event.target.name＆＃39;）

它在我的代码中指向这一行：

formState[event.target.name] = event.target.value;

我知道我没有正确定位评级组件。我完全难过了。我还没有完成按钮的点击，所以我并不担心。

这是我的代码：

var Rating = require('react-rating')

class Assignment extends Component {

  constructor(props) {
    super(props)
    this.state = {
      form: {
        site: '',
        facilityRate: '',
        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);
  }

  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.handleChange.bind(this)}
                  value={this.state.form.facilityRate} />
              </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

您应按照documentation中的提及，在onChange上致电<Rating />。所以你的组件应该是这样的：

<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} 
value={this.state.form.facilityRate} />

在handleRatingChange函数中，您将获得value：

handleRatingChange(value) {
    console.log(value);
    //here set your state for rating
}

如何在我的表单中使用react-rating组件获取值？

1 个答案: