javascript - 将选定的多个单选按钮值和 uniqueId 添加到数组

Question

我正在映射多个单选按钮(组)选项，当用户单击单选按钮时，我想将选定的值和 uniqueIds 添加到数组中。

使用我当前的代码，我可以获得我当前单击但无法添加到数组的值。

{result !== null && result.length > 0 ? (
    <div>
      {result.map(item => {
        const label = item.question
        const listOptions = item.options.map(item => {
          return (
            <Radio
              name={item.uniqueId}
              inline
              value={item.uniqueId}
              key={item.uniqueId}
              className="radio-options"
              checked={item.checked}
              onChange={e => {

                this.handleChange(label, uniqueId);
              }}
            >
              {item.options}
            </Radio>
          );
        });

        return (
          <div className="radio-options-overview">
            <p>{label}</p>
            {listOptions}
          </div>
        );
      })}

handleChange = (label, uniqueId) => {
  console.log(label, uniqueId);
  let addToArray = [];
  this.setState({ selectedItems: addToArray})
};

数组看起来像这样，

[
  { "label": "ageRange", "uniquId": 2 },
  { "label": "smoker", "uniquId": 1 },
  { "label": "exOption", "uniquId": 3 }
]

Answer 1

你快到了。 @Clarity 提供了很好的解决方案。如果您想替换现有值并将其替换为新值

试试这个

handleChange = (label, uniqueId) => {
    const { selectedItems } = this.state
    // Find items that already exists in array
    const findExistingItem = selectedItems.find((item) => {
      return item.uniqueId === uniqueId;
    })

    if(findExistingItem) {
      // Remove found Item 
      selectedItems.splice(findExistingItem);
      // set the state with new values/object
      this.setState(state => ({
        selectedItems: [...state.selectedItems, {
          label, uniqueId
        }]
      }))
    } else {
      // if new Item is being added
      this.setState(state => ({
        selectedItems: [...state.selectedItems, {
          label, uniqueId
        }]
      }))
    }
};