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

Question

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

• 李斯坦
• 彼得·帕克
• 玛丽·简
• 布鲁斯·班纳

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

• 斯坦李男
• 彼得·帕克（Peter Parker）男
• 玛丽简女性
• 布鲁斯·班纳（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'));