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

【问题标题】：How to invoke onChange for radio button using react-bootstrap?如何使用 react-bootstrap 为单选按钮调用 onChange？
【发布时间】：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>
        );
      }
    }

【问题讨论】：

标签： reactjs radio-button onchange react-bootstrap

【解决方案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 })}
  >

【讨论】：