Question

我是graphql react的新手，我有这个选择输入，但我无法接收数据。请有人帮我。谢谢。

import React, { Component } from "react";
import { graphql } from "react-apollo";

import gql from "graphql-tag";

class EmployeeCreate extends Component {
  constructor(props) {
    super(props);
    this.state = { firstName: "", lastName: "", type: "", status: "" };
  }

  onSubmit(event) {
    event.preventDefault();
    console.log(this.props);
    this.props
      .mutate({
        variables: {
          firstName: this.state.firstName,
          lastName: this.state.lastName,
          type: this.state.type,
          status: this.state.status,
          groupId: this.props.groupId
        }
      })
      .then(() =>
        this.setState({ lastName: "", firstName: "", type: "", status: "" })
      );
  }

  render() {
    return (
      <div className="ui six wide column">
        <div className="ui sticky">
          <ul className="list-group">
            <li className="list-group-item d-flex justify-content-between align-items-center active">
              EMPLOYEE FORM
            </li>
            <li className="list-group-item d-flex justify-content-between align-items-center">
              <form onSubmit={this.onSubmit.bind(this)}>
                <div className="form-row">
                  <div className="form-group col-md-6">
                    <label>First Name</label>
                    <input
                      type="text"
                      className="form-control"
                      placeholder="First Name"
                      onChange={event =>
                        this.setState({ firstName: event.target.value })
                      }
                      value={this.state.firstName}
                    />
                  </div>
                  <div className="form-group col-md-6">
                    <label>Last Name</label>
                    <input
                      type="text"
                      className="form-control"
                      placeholder="Last Name"
                      onChange={event =>
                        this.setState({ lastName: event.target.value })
                      }
                      value={this.state.lastName}
                    />
                  </div>
                </div>
                <div className="form-row">
                  <div className="form-group col-md-6">
                    <label>Type</label>
                    <select
                      className="form-control"
                      onChange={event =>
                        this.setState({ type: event.target.value })
                      }
                      value={this.state.type}
                    >
                      <option value="'REGULAR'">Regular</option>
                      <option value='EXTRA'>Extra</option>
                      <option value='OTHERS'>Others</option>
                    </select>
                  </div>
                  <div className="form-group col-md-6">
                    <label>Status</label>
                    <select
                      className="form-control"
                      onChange={event =>
                        this.setState({ status: event.target.value })
                      }
                      value={this.state.value}
                    >
                      <option>Active</option>
                      <option>Inactive</option>
                    </select>
                  </div>
                </div>
                <hr />
                <button type="submit" className="btn btn-primary">
                  Submit
                </button>
              </form>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

const mutation = gql`
  mutation AddEmployeeToGroup(
    $firstName: String
    $lastName: String
    $type: String
    $status: String
    $groupId: ID
  ) {
    addEmployeeToGroup(
      firstName: $firstName
      lastName: $lastName
      type: $type
      status: $status
      groupId: $groupId
    ) {
      id
      employees {
        id
        firstName
        lastName
        type
        status
      }
    }
  }
`;
export default graphql(mutation)(EmployeeCreate);

这是我的EmployeeCreate javascript文件。我可以收到我的名字，姓氏有效，只有选择无效。这是我的graphql网络结果。

11：{id：“ 5bda6fd576cca2030667f2b2”，firstName：“ aaa”，lastName：“ aaa”，类型：“”，状态：“”，…}

Answer 1

有人帮助了我，但他删除了他的评论。我只是用他的答案解决了我的问题。谢谢。

const options = {
 REGULAR: "Regular",
 EXTRA: "Extra",
 OTHERS: "Others"
};

this.state = { firstName: "", lastName: "", type: "REGULAR", status: "" };

                <select
                  className="form-control"
                  onChange={event =>
                    this.setState({ type: event.target.value })
                  }
                  value={this.state.type}
                >
                  {Object.keys(options).map(option => {
                    return (
                      <option
                        key={option}
                        value={option}

                      >
                        {option}
                      </option>
                    );
                  })}
                </select>

React，Graphql选择表格

1 个答案: