React JS在状态中存储一组id [英] React JS Storing an array of ids in state

问题描述

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

I have a prop called friends which is being listed as a checkboxes (default: unselected).

示例输出：

o Bob Smith

o Bob Smith

o Tom Brown

o Tom Brown

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

How can I save the id's of all the names that are selected?

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

E.g. both are ticked/selected -> ids 1 and 2 is stored.

这是我到目前为止：

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

推荐答案

这是一个稍微简化的代码版本，每次复选框都会调用一个新函数 handleChange / unchecked。

Here's a slightly simplified version of your code with a new function handleChange that is called every time a checkbox is checked/unchecked.

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

We take a copy of the state and extract selectedFriendsIds. If an id is to be added to the state setState is called with a new array of the new value merged into selectedFriendsIds. If checkbox is unchecked the setState is called with a filtered copy of selectedFriendsIds instead.

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

You might want to run this snippet full page as it logs the state to the console after each change to show you the output.

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>

此外在jsfiddle中可用。

这篇关于React JS在状态中存储一组id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！