反應-有條件不在表單提交中發送數據密鑰

Question

我正在嘗試如果選中復選框，則忽略onSubmit值，從而消除了對特定標簽/輸入的需求。 如果我選中indefinite runTime框， runTimeSeconds不再需要在有效負載中發送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個選擇。

如果通過使用三元條件選中了復選框，則可以將數據變量設置為undefined 。 在另一種情況下，將發送輸入中給出的時間：

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 });
};