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

Question

我正在使用 React 评级 (https://github.com/dreyescat/react-rating) 而且我不确定如何使用获取我的收视率的价值。我所有的其他领域都在工作。我输入 console.log 以查看它们的值已更改。

当我尝试点击星标为设施评分时，出现以下错误：

TypeError: undefined is not an object (evaluating 'event.target.name')

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

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

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

这是我的代码：

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

您应该在 <Rating /> 上调用 onChange，如 documentation 中所述。所以你的组件应该是这样的：

<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 组件获取值？

How to get the value using react-rating component in my form?

onchange

typeerror

reactjs

react-rating