javascript - 如何处理一组以上的单选按钮组 - reactjs

Question

我需要一点帮助或建议如何让它工作 - 我有不止一组单选按钮第一组选中和取消选中并显示正确的输入，但是当我选中第二组时，第一组未选中并显示第二组的输入。当选中第二组单选按钮时，我希望第一组单选按钮不取消选中。奇怪的是，这两个名称组都不同，这不是为什么它取消选中以前的组。认为选中的控件在选中时可以更好地用于跟踪。可以帮助解决我的问题。

    import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MainForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: null,
      isHidden: true,
      selectedOption: null,
      checkedState: null,
    };
  }

  handleCheckboxToggle(name, event) {
    if (event.target.checked) {
      this.setState({
        checkedState: event.target.value,
        isHidden: false,
        selectedOption: event.target.name,
      });
    } else {
      this.setState({
        isHidden: true,
        selectedOption: null,
      });
    }
  }

  renderCheckboxComponent(answer) {
    return (
      <div className="form__field--wrapper">
        {
        answer.map((item, index) => (
          <div key={item.id} className="form__checkbox form__checkbox--inline">
            <label className="form__checkbox required" htmlFor={`item.label-${item.name}-${index}`}>
              {item.label}
            </label>
            <input
              type="radio"
              id={`item.label-${item.name}-${index}`}
              name={item.name}
              value={item.value}
              onClick={e => this.handleCheckboxToggle(item.name, e)}
              checked={this.state.checkedState === item.value}
            />
            <span />
          </div>
          ))
        }
      </div>
    );
  }

  renderFieldInputComponent(fields, name) {
    return (
      <div>
        {
        fields.map(item => (
          this.state.selectedOption === item.name ?
            <div key={item.id} className="form__row">
              <label className="required" htmlFor={name}>
                {item.label}
              </label>
              <input
                type={item.type}
                id={name}
                name={name}
                required
                placeholder={item.placeholder}
              />
              <span />
            </div> : ''
          ))
        }
      </div>
    );
  }
  render() {
    const { data } = this.props;
    const { isHidden, isChecked } = this.state;
    return (
      <form>
        {
          data.map(item => (
            <div key={item.id} className="form__row form__row--checkbox">
              <p className="form__row--label">{item.name}</p>
              { this.renderCheckboxComponent(item.answer)}
              { !isHidden && this.renderFieldInputComponent(item.field, item.category)}
            </div>
          ))
        }
        <button type="button" className="btn btn--red">Update Preferences</button>
      </form>
    );
  }
}

MainForm.propTypes = {
  data: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
  }).isRequired).isRequired,
};

export default MainForm;

这是我正在处理的数据

   {  
  "Questions":[  
    {  
      "id":1,
      "name":"Email",
      "category":"emailPermission",
      "answer":[  
        {  
          "id":10,
          "label":"Yes",
          "value":"emailPermissionYes",
          "name":"emailPermission",
          "checked": true
        },
        {  
          "id":11,
          "label":"No",
          "value":"emailPermissionNo",
          "name":"emailPermission",
          "checked": true
        }
      ],
      "field":[
        {
          "id": 12, 
          "type": "email", 
          "name": "emailPermission", 
          "label": "Enter your email address",
          "placeholder": "example@email.com",
          "required": false
        }
      ]
    },
    {  
      "id":2,
      "name":"Post",
      "category":"postPermission",
      "answer":[  
        {  

          "id": 21,
          "label":"Yes",
          "value":"postPermissionYes",
          "name":"postPermission",
          "checked": true
        },
        {  
          "id": 22,
          "label":"No",
          "value":"postPermissionNo",
          "name":"postPermission",
          "checked": false
        }
      ],
      "field":[
        {
          "id": 23, 
          "type": "text",
          "name": "postPermission", 
          "label": "Postcode", 
          "placeholder": "SE1 7TP",
          "required": true
        }
      ]
    },
}

Answer 1

错误不在于您如何处理 name，而在于您如何处理选中状态。

每当选中一个单选按钮时，this.state.checkedState 就会更改为当前选中的单选按钮的值。

这意味着当您选择问题 2 中的单选按钮时，您最终会得到类似于 {checkedState: 'postPermissionYes'} 的状态。

当 React 然后重新呈现所有复选框时，只有最近点击的复选框会通过 checked={this.state.checkedState === item.value} 测试。对于 checked={this.state.checkedState === item.value}，之前点击的单选按钮将返回 false。

相反，我建议以稍微不同的方式处理 checkedState……

将每个 radio 组的值存储到一个状态属性中，您可以为每个 radio 组使用 name 值。

这意味着您会将状态存储为:

this.state = {
    emailPermission: null,
    postPermission: null,
    // other properties would go here as well...
}

您的处理程序如下所示:

handleCheckboxToggle(name, event) {
    this.state[name] = event.target.value;
}

最后， radio 将确定 checked 属性如下:

checked={this.state[item.name] === item.value}

希望对您有所帮助!