如何从下拉列表中将选择添加到React.js中的构建列表？

Question

从上一个问题开始，我知道如何建立姓氏和名字的列表：

• Stan Lee
• Peter Parker
• Mary Jane
• Bruce Banner

我有一个下拉列表，但我不知道如何将选择从下拉列表添加到我正在建立的人员列表中：

• Stan Lee男
• Peter Parker男
• Mary jane female
• Bruce Banner男

我查看了facebook页面上的react.js文档，但这些示例非常基础和稀疏。

import React from 'react';
import './index.css';
import { render } from 'react-dom';

const PostButton = (props)  => {
  const style = {
    width: 24,
    height: 24
  }
  return (
    <button style={style} onClick={() => props.handleClick()}>{props.label}</button>
  );
};

const PostText  = (props) => {
  const style = {
    border: "1px solid black",
    width: 200
  }
  return (
    <div style={style}>{props.text}</div>
  );
};

const SelectActivityDropDownList = (props) => {
    return (
        <select>
            <option selected value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="NoDisclosure">Prefer not to disclose</option>
        </select>
    );
};

const Post = (props) => {
  const style = {
    display: "flex"
  }
  return (
    <div style={style}>
      <PostButton label="x" handleClick={props.removeItem} />
      <PostText text={props.firstName} width="200" />
      <PostText text={props.lastName} width="200" />
    </div>
  );
};

const PostList = (props) => {
  console.log(props.postList);
  return (
    <ol>
      {
        props.postList.map((item, index) =>
          <Post key={index}
            firstName={item.firstName}
            lastName={item.lastName}
            removeItem={() => props.removeItem(index)}
          />
        )
      }
    </ol>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstname: "",
      lastname: "",
      items: []
    };
  }

  handleChange(event) {
    if (event.target.name === "firstname") {
      this.setState({ firstname: event.target.value });
    } else if (event.target.name === "lastname") {
      this.setState({ lastname: event.target.value });
    }
  }

  addItem() {
    this.setState({ items: [ ...this.state.items, { firstName: this.state.firstname, lastName: this.state.lastname} ], firstname: "", lastname: "" });
  }

  removeItem(index) {
    const items = this.state.items.filter((e, idx) => idx !== index); 
    this.setState({ items });
  }

  render() {
    return (
      <div>
        <div>First Name</div>
        <input name="firstname" value={this.state.firstname} onChange={this.handleChange.bind(this)} />
        <div>Last Name</div>
        <input name="lastname" value={this.state.lastname} onChange={this.handleChange.bind(this)} />
        <div>
            <SelectActivityDropDownList/>
        </div>
        <div>
            <button onClick={() => this.addItem()}>Submit</button>
        </div>
        <div>
            <PostList postList={this.state.items}
            removeItem={this.removeItem.bind(this)} />
        </div>
      </div>
    )
  }
}

render(<App />, document.getElementById('root'));

Answer 1

您可以通过将所选选项保持在状态（例如firstName和lastName）来将所选选项附加到创建的人，请尝试以下代码：

import React from 'react';
import './index.css';
import { render } from 'react-dom';

const PostButton = ({ label, index, handleClick }) => {
  const style = {
    width: 24,
    height: 24
  }

  return (
    <button
      style={style}
      onClick={() => handleClick(index)}
    >
      {label}
    </button>
  );
};

const PostText = ({ text }) => {
  const style = {
    border: "1px solid black",
    width: 200
  }

  return (
    <div style={style}>{text}</div>
  );
};

const Post = (props) => {
  const {
    item: { firstName, lastName, gender },
    removeItem,
    index,
  } = props;

  const style = {
    display: "flex"
  }

  return (
    <div style={style}>
      <PostButton
        label="x"
        handleClick={removeItem}
        index={index}
      />
      <PostText text={firstName} width="200" />
      <PostText text={lastName} width="200" />
      <PostText text={gender} width="200" />
    </div>
  );
};

const PostList = ({ removeItem, postList }) => {
  console.log(postList);

  return (
    <ol>
      {
        postList.map((item, index) => (
          <Post
            key={index}
            item={item}
            removeItem={removeItem}
            index={index}
          />
          )
        )
      }
    </ol>
  );
};

const SelectActivityDropDownList = ({ selectedOption, handleChange }) => (
  <select name="gender" value={selectedOption} onChange={handleChange}>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="NoDisclosure">Prefer not to disclose</option>
  </select>
)

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: '',
      lastName: '',
      gender: 'Male',
      items: []
    };
  }

  handleChange = event => this.setState({ [event.target.name]: event.target.value });

  addItem(newItem) {
    this.setState(Object.assign(
      this.state,
      {
        items: [...this.state.items, newItem],
        firstName: '',
        lastName: '',
        gender: 'Male',
      },
    ));
  }

  removeItem = index => {
    const items = this.state.items.filter((e, idx) => idx !== index);
    this.setState(Object.assign(
      this.state,
      { items }
    ));
  }

  render() {
    const { firstName, lastName, gender } = this.state;

    return (
      <div>
        <div>First Name</div>
        <input
          name="firstName"
          value={firstName}
          onChange={this.handleChange}
        />
        <div>Last Name</div>
        <input
          name="lastName"
          value={lastName}
          onChange={this.handleChange}
        />
        <div>
          <SelectActivityDropDownList
            selectedOption={gender}
            handleChange={this.handleChange}
          />
        </div>
        <div>
          <button
            disabled={!firstName || !lastName}
            onClick={() => this.addItem({ firstName, lastName, gender })}
          >
            Submit
          </button>
        </div>
        <div>
          <PostList
            postList={this.state.items}
            removeItem={this.removeItem}
          />
        </div>
      </div>
    )
  }
}

render(<App />, document.getElementById('root'));