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

Posted 2023-03-05

【中文标题】如何使用 react-bootstrap 为单选按钮调用 onChange？

【英文标题】：How to invoke onChange for radio button using react-bootstrap?

【发布时间】：2018-08-31 01:38:25

【问题描述】：

我找不到有关如何使用 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>
        );
      
    

【参考方案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 没有复选框的名称或值属性。它只是有一个选中的属性。您将不得不找到另一种方法来从目标中获取您正在寻找的信息。

【参考方案2】：

为了背负上一张海报，在您的单选按钮中，您有 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 问题，因此您必须首先将 name=adminRate 转换为 name=teacherRate FormGroup 按钮让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 逻辑来获得总体评分的平均数。

【参考方案3】：

您需要在<Radio> 元素上设置checked 属性作为对某些状态/道具的响应，以下是来自Formik / react-bootstrap 表单的sn-p：

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