javascript - React - 有条件地不在表单提交中发送数据 key

Question

如果选中了复选框，我会尝试省略一个值onSubmit，从而消除对特定标签/输入的需要。如果我选中indefinite runTime框，则不再需要在有效负载中发送runTimeSeconds键，这是在handleSubmit方法本身中完成的吗？

提交表单后，选中复选框后，它仍然会发送 runTimeSeconds 键，并且仍使用默认状态值发送。

这是一个复制问题的沙箱:https://codesandbox.io/s/5vvpj40rqk

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

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

    this.state = {
      windowLengthSeconds: 1,
      runTimeSeconds: 1,
      indefiniteCheckbox: false
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
    this.props.handleChange(e);
    console.log([e.target.value]);
    const value =
      e.target.type === "checkbox" ? e.target.checked : e.target.value;

    this.setState({
      [e.target.name]: value
    });
  };

  render() {
    const { indefiniteCheckbox } = this.state;
    return (
      <div className="params-boxes">
        <div className="checkbox">
          <label>Indefinite runTime:</label>
          <input
            type="checkbox"
            name="indefiniteCheckbox"
            value={this.state.indefiniteCheckbox}
            onChange={this.handleChange}
          />
        </div>
        {!indefiniteCheckbox && (
          <div>
            <label>runTimeSeconds:</label>
            <input
              type="number"
              name="runTimeSeconds"
              value={this.state.runTimeSeconds}
              onChange={this.handleChange}
              placeholder="1"
              min="1"
              required
            />
          </div>
        )}
        <div>
          <label>windowLengthSeconds:</label>
          <input
            type="number"
            name="windowLengthSeconds"
            value={this.state.windowLengthSeconds}
            onChange={this.handleChange}
            placeholder="1"
            min="1"
            step="1"
            required
          />
        </div>
      </div>
    );
  }
}

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

    this.state = {
      runtimeSeconds: 1,
      windowLengthSeconds: 1,
      indefiniteCheckbox: false
    };
  }

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

  handleSubmit = e => {
    e.preventDefault();
    data: JSON.stringify({
      parameters: {
        "stream.runtime.seconds": this.state.runTimeSeconds,
        "stream.window.length.seconds": this.state.windowLengthSeconds
      }
    });
    console.log(this.state);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <div>
            <fieldset>
              <legend>Parameters</legend>
              <div>
                <Params handleChange={this.handleChange} />
              </div>
            </fieldset>
          </div>
        </div>
        <div className="btn-group">
          <span className="input-group-btn">
            <button
              className="btnSubmit"
              handleSubmit={this.handleSubmit}
              type="submit"
            >
              Submit
            </button>
            <button
              className="btnReset"
              handleCancel={this.handleCancel}
              type="reset"
              onClick={() => {
                alert(
                  "Are you sure you want to cancel? Doing so will reset this page."
                );
              }}
            >
              Cancel
            </button>
          </span>
        </div>
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

您有 2 个选择。

如果使用三元条件选中了复选框，则可以将数据变量设置为未定义。在另一种情况下，发送输入中给出的时间:

handleSubmit = e => {
    e.preventDefault();
    const data = JSON.stringify({
        parameters: {
            "stream.runtime.seconds": !this.state.indefiniteCheckbox ? this.state.runTimeSeconds : undefined,
            "stream.window.length.seconds": this.state.windowLengthSeconds
        }
    });
};

或者，您可以在单独的变量中创建有效负载，并在条件匹配时从中删除所需的值:

handleSubmit = e => {
    e.preventDefault();
    const parameters = {
        "stream.runtime.seconds": this.state.runTimeSeconds,
        "stream.window.length.seconds": this.state.windowLengthSeconds
    }
    if (!this.state.indefiniteCheckbox) delete parameters['stream.runtime.seconds']

    const data = JSON.stringify({ parameters });
};