reactjs - 如何运行突变 onChange，同时链接其他选项？

问题描述

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

我仍然在这里学习，所以这是我所得到的。我试过谷歌搜索，但似乎找不到答案。

这是我的代码的副本，但我对其进行了一些更改/剥离：

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：我想做 2 件事：1. 更改开关时运行突变 2. 更改主开关时，显示/隐藏子选项并启用/禁用它们并将其值设置为 false如果主开关为假。

再次道歉，如果这是一个新手问题。我还在学习:)提前谢谢！

标签： reactjsgraphqlreact-apollo

reactjs - 如何运行突变 onChange，同时链接其他选项？

问题描述

解决方案

推荐阅读