Question

为新手问题道歉，但我想在编辑屏幕上有一个布尔字段，并使用React Switch（https://github.com/markusenglund/react-switch）组件来呈现开关。我不想使用表单提交按钮，而是想在动态更改开关时运行突变。另外，我想切换子选项的可见性，并设置其禁用状态，并根据“主”开关的状态更改其值。我的笔记在下面的代码中...

我还在这里学习，所以这是我所学到的。我曾尝试使用Google搜索，但似乎找不到答案。

这是我的代码的副本，但我对其进行了更改/删除：

import React, { Component } from "react";
import { Query, Mutation } from "react-apollo";
import gql from "graphql-tag";
import PropTypes from "prop-types";
import Error from "../ErrorMessage";
import Switch from "react-switch";

const MY_ACCOUNT_QUERY = gql`
  query {
    me {
      id
      account {
        toggleOptionOne
        toggleOptionTwo
        toggleOptionThree
      }
    }
  }
`;

const UPDATE_ACCOUNT_MUTATION = gql`
  mutation UPDATE_ACCOUNT_MUTATION(
    $toggleOptionOne: Boolean
    $toggleOptionTwo: Boolean
    $toggleOptionThree: Boolean
  ) {
    updateAccount(
      toggleOptionOne: $toggleOptionOne
      toggleOptionTwo: $toggleOptionTwo
      toggleOptionThree: $toggleOptionThree
    ) {
      toggleOptionOne
      toggleOptionTwo
      toggleOptionThree
    }
  }
`;

class Visibility extends Component {
  render() {
    return (
      <Query query={MY_ACCOUNT_QUERY}>
        {({ data: { me }, loading }) => {
          if (loading) return <p>Loading...</p>;
          if (!me.id) return <p>No user found.</p>;
          return (
            <>
              <VisibilityToggles account={me.account} key={me.account.id} />
            </>
          );
        }}
      </Query>
    );
  }
}

class VisibilityToggles extends React.Component {
  static propTypes = {
    account: PropTypes.shape({
      toggleOptionOne: PropTypes.Boolean,
      toggleOptionTwo: PropTypes.Boolean,
      toggleOptionThree: PropTypes.Boolean
    }).isRequired
  };
  state = {
    toggleOptionOne: this.props.account.toggleOptionOne,
    toggleOptionTwo: this.props.account.toggleOptionTwo,
    toggleOptionThree: this.props.account.toggleOptionThree
  };
  handleChange = (checked, event, id) => {
    this.setState({ [id]: checked });
  };
  render() {
    return (
      <Mutation
        mutation={UPDATE_ACCOUNT_MUTATION}
        variables={{
          toggleOptionOne: this.state.toggleOptionOne,
          toggleOptionTwo: this.state.toggleOptionTwo,
          toggleOptionThree: this.state.toggleOptionThree
        }}
      >
        {(updateAccount, { loading, error }) => (
          <>
            {error && <Error error={error} />}
            <label htmlFor="toggleOptionOne">
              <Switch
                id="toggleOptionOne"
                name="toggleOptionOne"
                onChange={this.handleChange}
                checked={this.state.toggleOptionOne} />
              Master Option Toggle
            </label>
            {/* NOTE: I'd like to run the mutation to save the changed value to the database on the fly without having to have a form submit button */}
            {/* NOTE: toggling above to ON should REVEAL the following 2 items. */}
            {/* Toggling above to OFF should HIDE the following 2 items AND set them to false and disabled. */}
            <fieldset id="THIS_BLOCK_SHOULD_TOGGLE">
              <div>
                <label htmlFor="toggleOptionTwo">
                  <Switch
                    id="toggleOptionTwo"
                    name="toggleOptionTwo"
                    onChange={this.handleChange}
                    checked={this.state.toggleOptionTwo} />
                  Sub Option Toggle 1
                </label>
                {/* NOTE: I'd like to run the mutation to save the changed value to the database on the fly without having to have a form submit button */}
              </div>
              <div>
                <label htmlFor="toggleOptionThree">
                  <Switch
                    id="toggleOptionThree"
                    name="toggleOptionThree"
                    onChange={this.handleChange}
                    checked={this.state.toggleOptionThree} />
                  Sub Option Toggle 2
                </label>
                {/* NOTE: I'd like to run the mutation to save the changed value to the database on the fly without having to have a form submit button */}
              </div>
            </fieldset>
          </>
        )}
      </Mutation>
    );
  }
}

export default Visibility;

TLDR：我想做两件事： 1.更改开关时运行突变 2.更改主开关后，可以显示/隐藏子选项，也可以启用/禁用这些子选项，如果主开关为false，则将其值设置为false。

同样，如果这是一个新手问题，我们深表歉意。我还在学习:)提前谢谢！

Answer 1

我认为有两种方法可以实现您想要的。有些可能需要一些重组。现在，我可以建议这一点：

1）将updateAccount作为参数传递给handleChange函数，并在您认为合适的时候执行它。 2）检出Mutation组件的refetch属性。

refetchQueries ：（ mutationResult：FetchResult）=> Array <{查询：DocumentNode，变量？：TVariables} |字符串>

Mutations Docs

如何在onChange上运行突变，并链接其他选项？

1 个答案: