如何在reactjs中的一个组件中处理多个单选按钮组？

Question

我正在尝试通过单击发送按钮从多个单选按钮组发送所选单选按钮ID的列表,

我的问题: 我从后端获得选择单选按钮,然后我应该能够更改单选按钮并发送回后端.但是当我尝试更改单选按钮时,它无法正常工作.

我不明白的是: 如何处理on更改功能,通常在更改时我们可以更改状态但是要在加载时更改状态我们应该抓取值单选按钮.最后我被击中了,不知道如何前进.

这是线框和代码段:

function CardsList(props) {
  const cards = props.cards;
  return (
    <div>
      {cards.map((card, idx) => (
       <div>
         {card.cardName}
          {
            card.options.map((lo,idx) => (
              <li key={idx}>
              <input
                 className="default"
                 type="radio"
                 name={card.cardName}
                 checked={lo.selected}
             />))
          }
         <div>
       ))}
   </div>
  );
}
//array of cards coming from the backend
const cards = [
{cardName:'card1',options:[{radioName:'card1-radio1',selected:'true'},
                          {radioName:'card1-radio2',selected:'false'}]},
  {cardName:'card2',options:[{radioName:'card2-radio1',selected:'true'},
                          {radioName:'card2-radio2',selected:'false'}]}
];
ReactDOM.render(
  <CardsList cards={cards} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

您无法更改它们的原因是您在此处设置的当前选中状态：

<input
  className="default"
  type="radio"
  name={card.cardName}
  checked={lo.selected}
/>

对于这个具体场景，我使用的方法是将组件的状态（来自服务器）存储在组件的状态 ( this.state) 中，将状态传递给 element: checked={this.state.isChecked}，然后更新元素的 state onClick。

例子：

class CardsList extends Component {
  constructor(props){
    super(props);
    this.state = {isChecked: false};
    this.inputOnClick = this.inputOnClick.bind(this);
  }
  //fetch data from server
  fetchData(){
    fetch('/api')
      .then(res => res.json())
      //this will be our initial state
      .then(res => this.setState(res))
  }
  componentDidMount(){
    this.fetchData();
  }
  //change radio button state on click
  inputOnClick(e){
    e.preventDefault();
    //invert state value
    this.setState((prevState, props) => {isChecked: !prevState.isChecked});
  }
  render(){
    return (
      <input
        type="radio"
        checked={this.state.isChecked}
        onClick={this.inputOnClick}
       />
      )
   }
}

这个答案可能适用于单个单选按钮组，但我面临着多个单选按钮组中的多个单选按钮的问题。如果您看到卡片数组，它如何知道它属于哪个单选按钮组。

我们可以根据单选按钮的名称修改状态。

让我们将所有卡片保存在组件的状态中。我知道卡片是从服务器检索的，并将使用保存setState，但我这样写是为了视觉目的。

this.state = {cards: [
  { cardName:'card1',
  options:[
    {radioName:'card1-radio1',selected:true},
    {radioName:'card1-radio2',selected:false}
   ]
  },
  { cardName:'card2',
    options:[
      {radioName:'card2-radio1',selected:true},
      {radioName:'card2-radio2',selected:false}
     ]
    }
]}

现在，当我们单击单选按钮时，我们将使用该单选按钮的名称来更新需要更新的状态。由于 React 状态需要不可变，因此我们将创建状态的深层副本，修改它，然后用它设置状态。

inputOnClick(e){
  e.preventDefault();
  var thisRadioBtn = e.target.name;
  //make a deep copy of the state
  const stateCopy = JSON.parse(JSON.stringify(this.state.cards));
  //go through state copy and update it
  stateCopy.forEach(card => {
    card.options.forEach(option => {
      if(option.radioName === thisRadioBtn){
        //invert value
        //make sure the values are booleans
        option.selected = !option.selected;
      }
    });
  });
  //update the components state
  this.setState({cards: stateCopy});
}