reactjs - 如何使用react-bootstrap调用单选按钮的onChange？

Question

我找不到有关如何使用react-bootstrap为单选按钮调用onChange的文档。我省略了提交表单的按钮。它适用于所有其他字段，例如文本输入，因此我将其排除在外。

对于每个teacherRate 和overallRate，每个单选按钮的值分别为1、2、3，但我不确定如何将其关联起来。

我也知道我不能让每个类别的值都相同。

我不想做按钮组。

我在网上寻找类似的答案，但找不到任何答案。有一个人发布了像我一样的问题，但后来回复说他实现了react-bootstrap，但没有发布他的解决方案。我无法回复，因为我没有足够的积分。

    class Assignment extends Component {

      constructor(props){
        super(props)
        this.state = {
          form: {
            teacherRate: '',
            overallRate: ''
          }
        }
      }

      handleChange(event){
        const formState = Object.assign({}, this.state.form)
        formState[event.target.name] = event.target.value
        this.setState({form: formState})
      }

      render() {
        return (
          <Grid>
            <form>

              <FormGroup>
                <ControlLabel id='adminRate'>Rate the Teacher</ControlLabel>
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>1</Radio>{' '}
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>2</Radio>{' '}
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>3</Radio>{' '}
              </FormGroup>

              <FormGroup>
                <ControlLabel id='adminRate'>Overall Rating</ControlLabel>
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>1</Radio>{' '}
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>2</Radio>{' '}
                  <Radio name='adminRate' type='integer' inline
                    onChange={this.handleChange.bind(this)}
                    value={this.state.form.adminRate}>3</Radio>{' '}
              </FormGroup>
            </form>
          </Grid>
        );
      }
    }

Answer 1

onChange 事件正在被触发，但是您的handleChange 函数没有执行您期望的操作。

  handleChange(event){
    const formState = Object.assign({}, this.state.form)
    formState[event.target.name] = event.target.value
    this.setState({form: formState})
  }

如果您在调试器中查看，event.target 没有复选框的名称或值属性。它只是有一个检查属性。您必须找到另一种方法来从目标中获取您正在寻找的信息。