仅打印单击的单选按钮值（反应）

Question

在控制台中打印选定的单选按钮值。如果所有 radiogroup 都得到回答，则仅在控制台中打印 selected= true radioValue。例如：如果 NO radiobutton= true 它的值为 2。它应该打印值 2。就像所有真正的 radiovalue 应该在控制台中打印。
谢谢

//array of cards coming from the backend
const data = [
  {
    cardName: 'Do you want  sugar in your coffee',
    options: [
    { radioName: 'Yes',radioValue: '1', selected: false },
    { radioName: 'No',radioValue: '2', selected: false }]
  },
  {
    cardName: 'Do you want  milk in your coffee', 
    options: [
    { radioName: 'Yes',radioValue: '1', selected: false },
    { radioName: 'No',radioValue: '2', selected: false }]
  },
  {
    cardName: 'Do you want  low-fat-milk in your coffee', 
    options: [
    { radioName: 'Yes',radioValue: '1', selected: false },
    { radioName: 'No',radioValue: '2', selected: false }]
  }
];


class CardsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
cards: [],

    };
  }

  componentDidMount() {
    setTimeout(() => {
      // mimic an async server call
      this.setState({ cards: data });
    }, 1000);
  }

  onInputChange = ({ target }) => {
    const { cards } = this.state;
    const nexState = cards.map(card => {
      if (card.cardName !== target.name) return card;
      return {
        ...card,
        options: card.options.map(opt => {
          const checked = opt.radioName === target.value;
          return {
            ...opt,
            selected: checked
          }
        })
      }
    });
    this.setState({ cards: nexState })
  }

  onSubmit = () => { 
 console.log(this.state.cards.map(({ cardName, options }) => {
  const option = options.filter(({ selected }) => selected)[0]
  return ` ${option.radioValue}`
}))
  };

 onReset = () => {
        this.setState({cards:[]});
      }
  render() {
    const { cards } = this.state;
    return (
      <div>
        {
          cards.length < 1 ? "Loading..." :
            <div>
              {cards.map((card, idx) => (
                <ul>
                  {card.cardName}
                  {card.options.radioName}

                  {
                    card.options.map((lo, idx) => {
                      return <input
                        key={idx}
                        type="radio"
                        name={card.cardName}
                        value={lo.radioName}
                        checked={!!lo.selected}
                        onChange={this.onInputChange}
                      />

                    })
                  }
                </ul>
              ))
              }
              < button onClick={this.onSubmit}>Submit</button>
               < button onClick={this.onReset}>Clear</button>
            </div>
        }

      </div>
    );
  }
}

ReactDOM.render(<CardsList />, 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

将您的登录 onSubmit 更改为此

console.log(this.state.cards.map(({ cardName, options }) => {
  const option = options.filter(({ selected }) => selected)[0]
  return `${cardName}: ${option.radioName}`
}))

通过这种方式，您可以将选项筛选为 selected 为真，然后选择第一个。

要解决您的第一个问题，只需在执行日志之前映射您的 this.state.cards 数组并检查是否恰好有 1 个 option，其中 selected 为真。如果不是这种情况，请以您想要的任何方式告诉用户。

您也可以删除构造函数并将其更改为：

state = {
    cards: [],
}

因为你没有在你的构造函数中访问你的道具

Answer 2

你可以按照@george的回答去做，

为了检查是否为每张卡片单击了任一单选按钮，您可以运行验证检查

let unselectedCards = this.state.cards.filter((card) => {
   return !card.options[0].selected && !card.options[1].selected
});

使用 unselectedCards 变量突出显示卡片。

如果您有更多选项，可以在卡片地图中再次使用地图选项。

仅打印单击的单选按钮值（反应）

Print only clicked radio button value(React)

javascript

arrays

radio-group

javascript-objects

reactjs