Reactjs 如何使用react引导为单选按钮调用onChange？

我找不到关于如何使用react引导为单选按钮调用onChange的文档。我遗漏了提交表单的按钮。它适用于其他所有字段，比如文本输入，所以我忽略了这一点

对于每个，teacherRate和overallRate，每个单选按钮都有一个值1、2、3，但我不知道如何将其联系起来

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

我不想做按钮组

我在网上寻找类似的答案，但没有找到。有一个人发布了他们的问题，比如我的问题，但后来回答说他实现了react引导，但没有发布他的解决方案。我不能回答，因为我没有足够的分数

    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>
        );
      }
    }

类分配扩展组件{
建造师（道具）{
超级（道具）
此.state={
表格：{
教师人数：''，
总体增长率：''
}
}
}
手变（活动）{
const formState=Object.assign（{}，this.state.form）
formState[event.target.name]=event.target.value
this.setState（{form:formState}）
}
render（）{
返回(
给老师打分
1{' '}
2{' '}
3{' '}
总体评级
1{' '}
2{' '}
3{' '}
);
}
}

正在触发onChange事件，但您的handleChange函数没有达到预期效果

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

---

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

要借用上一张海报，在你的单选按钮中有

value={this.state.form.adminRate}

但在中从未定义adminRate

this.state = {
 form: {
 teacherRate: '',
 overallRate: ''
}

因此，当您从handleChange函数返回

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

时，它不会将任何值输入

event.target.name

。因此，您可能只想在相应的按钮中输入1、2和3作为值

此外，即使它确实输入了值，单选按钮中的

event.target.name

也是adminRate，因此您将再次遇到this.state问题，因此您必须将第一个FormGroup按钮中的

name={adminRate}

转换为

name={teacherRate}

，以便formState对象在

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

在函数末尾调用

this.setState（{form:formState}）

时，指向this.state中定义的表单对象内的teacherRate属性

---

我不知道使用“总体评级”单选按钮的相关性，所以我不能帮助第二个FormGroup，但它基本上与第一个相同。您需要

Math

logic来获得总体评级的平均数。

您需要在

元素上设置

checked

属性，作为对某些状态/道具的响应，以下是来自Formik/react引导表单的一个片段：

  <Radio
    name="upload_radio"
    checked={status.upload_radio === 'textarea'}
    value="textarea"
    onChange={e => setStatus({ upload_radio: e.target.value })}
  >

setStatus（{upload\u radio:e.target.value}）
>