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

Question

我找不到有关如何使用 react-bootstrap 为单选按钮调用 onChange 的文档。我省略了提交表单的按钮。它适用于所有其他领域，例如文本输入，所以我忽略了它。

对于每个，teacherRate 和 totalRate，每个单选按钮的值分别为 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 没有复选框的名称或值属性。它只是有一个检查属性。您必须找到另一种方法来从目标中获取您正在寻找的信息。