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

Question

我正在映射多个单选按钮（组）选项，当用户单击单选按钮时，希望将选定的值和 uniqueId 添加到数组中。

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

{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) => {&nbsp; &nbsp; const { selectedItems } = this.state&nbsp; &nbsp; // Find items that already exists in array&nbsp; &nbsp; const findExistingItem = selectedItems.find((item) => {&nbsp; &nbsp; &nbsp; return item.uniqueId === uniqueId;&nbsp; &nbsp; })&nbsp; &nbsp; if(findExistingItem) {&nbsp; &nbsp; &nbsp; // Remove found Item&nbsp;&nbsp; &nbsp; &nbsp; selectedItems.splice(findExistingItem);&nbsp; &nbsp; &nbsp; // set the state with new values/object&nbsp; &nbsp; &nbsp; this.setState(state => ({&nbsp; &nbsp; &nbsp; &nbsp; selectedItems: [...state.selectedItems, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label, uniqueId&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // if new Item is being added&nbsp; &nbsp; &nbsp; this.setState(state => ({&nbsp; &nbsp; &nbsp; &nbsp; selectedItems: [...state.selectedItems, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label, uniqueId&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }))&nbsp; &nbsp; }};

Answer 2

你可以这样做：handleChange = (label, uniqueId) => {&nbsp; this.setState(state => ({ selectedItems: [...state.selectedItems, uniqueId]}));};通过使用数组展开和函数形式，setState确保您不会直接改变状态并将项目添加到最新状态。如果你想用一label: uniqueId对添加一个对象，你可以这样做：handleChange = (label, uniqueId) => {&nbsp; this.setState(state => ({&nbsp; &nbsp; selectedItems: [...state.selectedItems, {&nbsp; &nbsp; &nbsp; [label]: uniqueId&nbsp; &nbsp; }]&nbsp; }));};编辑：如果要覆盖具有相同标签的项目，最简单的方法是将它们存储为对象而不是数组，因此具有相同标签的项目将覆盖现有项目：handleChange = (label, uniqueId) => {&nbsp; &nbsp; this.setState(state => {&nbsp; &nbsp; &nbsp; return { selectedItems: { ...state.selectedItems, [label]: uniqueId } };&nbsp; &nbsp; });&nbsp; };

Answer 3

老实说，我不明白，你想做什么，但如果你需要在数组中添加对象（或其他东西），你可以使用.push()方法。例如：let addToArray = [];let test = {"label": "ageRange", "uniquId": 2};addToArray.push(test);console.log(addToArray); //[{label: "ageRange", uniquId: 2}]