React JS在状态中存储一个id数组

Question

我有一个名为 friends 的道具，它被列为复选框（默认：未选中）。

示例输出：

o 鲍勃·史密斯

汤姆·布朗

如何保存所有选择的名称的 id？

例如两者都被勾选/选中-> ids 1 和 2 被存储。

这是我目前所拥有的：

class SelectFriends extends Component {
  constructor(props) {
  super(props)
  this.state = {
    SelectedFriendsIds: [],
  }
}

render() {
  const { SelectedFriendsIds } = this.state
  const { userId, friends, addFriendsTo } = this.props

return (
    <div>
      <SubHeader title="Add Friends..." />
      <div>
        {friends
          .mapEntries(([friendId, frn]) => [
            friendId,
            <div key={friendId}>
              <input
                  value={friendId}
                  type='checkbox'
               // onChange={ () => console.log("do something")
                  defaultChecked={false} />
              {frn.firstName} {frn.lastName}
            </div>,
          ])
          .toList()}
      </div>
        <div>
          <Button style="blue" name="Done" onClick={() => addFriendsTo(SelectedFriendIds, userId)} />
        </div>
    </div>
  )
 }
}

export default SelectFriends

Answer 1

您可以简单地使用 array.push 在检查时添加 id array.filter 来检索单个 id 和 array.slice 来删除单个身份证。

Answer 2

这是您的代码的略微简化版本，其中包含一个新函数 handleChange，每次选中/取消选中复选框时都会调用该函数。

我们复制状态并提取selectedFriendsIds。如果要将 id 添加到状态 setState 中，则调用合并到 selectedFriendsIds 中的新值的新数组。如果未选中复选框，则使用 selectedFriendsIds 的过滤副本调用 setState。

您可能希望运行此 sn-p 完整页面，因为它会在每次更改后将状态记录到控制台以向您显示输出。

class SelectFriends extends React.Component {

  constructor(props) {
    super(props);
    this.state = { selectedFriendsIds: [] }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const { checked, value } = e.target;
    let { selectedFriendsIds } = this.state;
    if (checked) {
      selectedFriendsIds = [...selectedFriendsIds, value];
    } else {
      selectedFriendsIds = selectedFriendsIds.filter(el => el !== value);
    }
    this.setState({ selectedFriendsIds }, () => console.log(this.state));
  }


  render() {
  
    const { friends } = this.props;
  
    return (
      <div>
        <h2>Add Friends</h2>
          {friends.map(({ friendId, frn }) => {
            return (
              <div key={friendId}>
                <input value={friendId} type="checkbox" onChange={this.handleChange} />{frn}
              </div>
            );
          })}
      </div>
    )
  }
}

const friends = [
  { friendId: 1, frn: 'Bob' },
  { friendId: 2, frn: 'Davros' },
  { friendId: 3, frn: 'Daisy' }
];

ReactDOM.render(
  <SelectFriends friends={friends} />,
  document.getElementById('container')
);

<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="container"></div>

还有available in a jsfiddle。

Answer 3

代码可以这样修改

  class SelectFriends extends Component {
    constructor(props) {
        super(props)
        this.state = {
            SelectedFriendsIds: {},  //CHANGING INTO OBJ FOR EASIER MANIPULATION
        }
    }

    render() {
        const { SelectedFriendsIds } = this.state
        const { userId, friends, addFriendsTo } = this.props

        return (
            <div>
                <SubHeader title="Add Friends..." />
                <div>
                    {friends
                        .mapEntries(([friendId, frn]) => [
                            friendId,
                            <div key={friendId}>
                                <input
                                    checked={friendId}   //USE CHECKED ALWAYS FOR CHECKBOXES
                                    type='checkbox'
                                    onChange={(e) => {
                                        let x = SelectedFriendsIds;
                                    if (e.target.checked) {
                                        x[friendId] = true;
                                    }
                                    else {
                                        delete x[friendId];
                                    }
                                    this.setState({
                                        SelectedFriendsIds: x
                                    })
                                    }} />
                                {frn.firstName} {frn.lastName}
                            </div>,
                        ])
                        .toList()}
                </div>
                <div>
                    <Button style="blue" name="Done" onClick={() => addFriendsTo(SelectedFriendIds, userId)} />
                </div>
            </div>
        )
    }
}

export default SelectFriends

如果您需要一组选定的朋友，只需使用

Object.keys(this.state.SelectedFriendsIds)

Answer 4

您需要检查该值是否已经在您选择的列表中，如果不存在则添加它，否则删除复选框的值 onChange 事件。查看下面的示例代码

class SelectFriends extends Component {
  constructor(props) {
  super(props)
  this.state = {
    SelectedFriendsIds: [],
  }
}

onChange = (val) => {
   const SelectedFriendsIds = [...this.state.SelectedFriendsIds];
   const presentIndex = SelectedFriendsIds.indexOf(val)
   if(presentIndex > 0) {
      SelectedFriendsIds.splice(presentIndex, 1);
   } else {
      SelectedFriendsIds.push(val);
   }
   this.setState({SelectedFriendsIds})

}
render() {
  const { SelectedFriendsIds } = this.state
  const { userId, friends, addFriendsTo } = this.props

return (
    <div>
      <SubHeader title="Add Friends..." />
      <div>
        {friends
          .mapEntries(([friendId, frn]) => [
            friendId,
            <div key={friendId}>
              <input
                  value={friendId}
                  type='checkbox'
                  onChange={ () => this.onChange(friendId)
                  defaultChecked={false} />
              {frn.firstName} {frn.lastName}
            </div>,
          ])
          .toList()}
      </div>
        <div>
          <Button style="blue" name="Done" onClick={() => addFriendsTo(SelectedFriendIds, userId)} />
        </div>
    </div>
  )
 }
}

export default SelectFriends

Answer 5

我想建议您对组件的设计进行一些小的改进，这也解决了如何有效地维护所选朋友 ID 的状态的问题。坦率地说，没有必要维护选定 ID 的状态。相反，请保持朋友集合的状态 - 每个代表朋友的对象都具有“选定”属性。这样，您就可以轻松过滤选定的内容并将此信息发送到上层组件。下面是完整解释这一点的代码 sn-p：

import React, { Component } from 'react';
import * as _ from 'lodash';
import PropTypes from 'prop-types';

class FriendsList extends Component {

state = {
    friends: []
}

constructor(props) {

    super(props);

    this.onAdd = this.onAdd.bind(this);

    this.state.friends = [ {id: 1, name: 'John', selected: false}, 
        { id: 2, name: 'Ally', selected: false},
        { id: 3, name: 'Becky', selected: false},
        { id: 4, name: 'Frank', selected: false},
        { id: 5, name: 'Mark', selected: true},
        { id: 6, name: 'Alice', selected: true}
    ];
}

onCheckboxChange(event, n) {
    n.selected = !n.selected;
    this.forceUpdate();
}

onAdd() {
    const selectedFriends = _.filter( this.state.friends, (friend) => {
        return friend.selected === true;
    });
    this.props.onAdd(selectedFriends);
}

render() {
    const { friends } = this.state;
    return (
        <div>
            {friends.map(n => {
                return (
                    <div key={n.id}>
                        {n.name} <input type="checkbox" onChange={(event) => this.onCheckboxChange(event, n)} checked={n.selected}/>
                    </div>
                );
            })}
            <button onClick={this.onAdd}>Add Friends</button>
        </div>
    );
}
}
FriendsList.propTypes = {
  onAdd: PropTypes.func,
};
export default FriendsList;