This.props 由于某种原因为空（React.js）

Question

所以我尝试使用 react 和 node.js 制作一个简单的表单。我在使用 props 时遇到问题，因为它在我的 form.js 代码中始终为空，但在我的复选框代码中我看到值已更新并且我可以记录它。道具。 我目前在 onSubmit 中使用此复选框验证来验证我的表单。 我对某种方式的反应很陌生，所以 props 和 states 正在踢我。 下面是我的代码。 先感谢您

import React from "react";
class CheckBox extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checkBoxChecked: false,
    };
    this.handleCheckBoxClick = this.handleCheckBoxClick.bind(this);
  }
  handleCheckBoxClick = () => {
    this.setState({ checkBoxChecked: !this.state.checkBoxChecked });
  };

  render() {
    return (
      <div>
        <div
          className="form-check form-check-inline"
          style={{ paddingTop: "20px" }}
        >
          <input
            className="form-check-input"
            type="checkbox"
            id="inlineCheckbox1"
            value="option1"
            onChange={this.handleCheckBoxClick}
          />
          <label className="form-check-label" htmlFor="inlineCheckbox1">
            Daily
          </label>
        </div>
        <div className="form-check form-check-inline">
          <input
            className="form-check-input"
            type="checkbox"
            id="inlineCheckbox2"
            value="option2"
            onChange={this.handleCheckBoxClick}
          />
          <label className="form-check-label" htmlFor="inlineCheckbox2">
            Hourly
          </label>
        </div>
      </div>
    );
  }
}

export default CheckBox;


import React from "react";
import CheckBox from "../checkBox/checkBox";
import axios from "axios";
class Forms extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      emails: "",
      alerts: "",
      submit: this.props.value,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    console.log(this.props);
  }

  handleAlertButtonClick = () => {
    const data = this.state.alerts;

    axios.post("/test", data);
    if (this.state.submit === true) {
      console.log(data);
    }
  };

  handleSaveButtonClick = () => {
    const data = this.state.alerts;

    axios.post("/save", data);
    if (this.state.submit === true) {
      console.log(data);
    }
  };

  handleSaveChange = (e) => {
    let alerts = this.state.alerts;
    alerts = e.target.value;
    this.setState({ alerts });
  };

  handleSubmit = (event) => {
    let submit = this.state.submit;
    if (submit !== true) {
      alert("This form is invalid please try again!");
      event.preventDefault();
    } else {
      alert("Your form has been succesfully submitted");
    }
  };

  render() {
    //const { checkCheckBox } = this.props;

    return (
      <div>
        {" "}
        <form className="needs-validation" onSubmit={this.handleSubmit}>
          <div className="form-group" style={{ paddingTop: "40px" }}>
            <label htmlFor="alertInput"> Alert Message</label>
            <input
              type="text"
              className="form-control"
              id="alertInput"
              placeholder="Alert Message"
              onChange={(e) => {
                this.handleSaveChange(e);
              }}
              ref={(input) => this.input}
              required
            />
          </div>

          <CheckBox required />

          <div className="form-group" style={{ paddingTop: "30px" }}>
            <label htmlFor="emailInput">Email Recipients</label>
            <input
              type="email"
              multiple
              className="form-control"
              id="emailInput"
              placeholder="Email Recipients"
              required
            />
          </div>
          <div
            className="d-grid gap-2 d-md-flex justify-content-md-end"
            style={{ paddingTop: "25px" }}
          >
            <button
              className="btn btn-primary me-md-2"
              type="submit"
              onClick={this.handleAlertButtonClick}
            >
              Test Alert
            </button>
            <button
              className="btn btn-primary"
              type="submit"
              onClick={this.handleSaveButtonClick}
            >
              Save
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default Forms;

Answer 1

首先，您必须从Checkbox组件公开处理程序，

// CheckBox.js
...
handleCheckBoxClick = () => {
  this.setState({ checkBoxChecked: !this.state.checkBoxChecked });
  this.props.setChecked(this.state.checkBoxChecked)
};
...

然后在Forms组件中传递此处理程序

// Forms.js
<CheckBox required setChecked={this.setChecked} />

然后当然，处理它

// Forms.js
setChecked = (checked) => {
  console.log("Checked: ", checked)
}

此外，您需要将选项传递给 Checkbox 组件中的检查处理程序，以区分选项

onChange={() => this.handleCheckBoxClick('option1')}

但这以防万一您无论如何都需要它它可以根据您的描述工作

Answer 2

您在 form.js 中的 state 始终为空，因为您在初始化后没有更新它。 您没有正确处理输入。 您应该给输入字段一个名称<input name="emails"....> 。 然后使用该名称访问其值并在每次击键时动态更新 state。

handleSaveChange = (e) => {
    let { name, value } = e.target;
    this.setState({ ...this.state, [name]: value });
    console.log(this.state)
};

另一个严重错误是您将 state 设置为一个 object this.setState({ alerts }); 在这种情况下，您将只有您将只有alerts并丢失所有其他数据。 要改变 state 的一部分并保留其他数据，您应该使用扩展运算符。 this.setState({...this.state, name: value }); 这是代码的固定版本，可以正常工作。 （PS 我禁用了 axios 调用，因为我没有相关的 api）

import React from "react";
import axios from "axios";

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

    this.state = {
      checkBoxChecked: false,
    };
    this.handleCheckBoxClick = this.handleCheckBoxClick.bind(this);
  }
  handleCheckBoxClick = () => {
    this.setState({ checkBoxChecked: !this.state.checkBoxChecked });
  };

  render() {
    return (
      <div>
        <div
          className="form-check form-check-inline"
          style={{ paddingTop: "20px" }}
        >
          <input
            className="form-check-input"
            type="checkbox"
            id="inlineCheckbox1"
            value="option1"
            onChange={this.handleCheckBoxClick}
          />
          <label className="form-check-label" htmlFor="inlineCheckbox1">
            Daily
          </label>
        </div>
        <div className="form-check form-check-inline">
          <input
            className="form-check-input"
            type="checkbox"
            id="inlineCheckbox2"
            value="option2"
            onChange={this.handleCheckBoxClick}
          />
          <label className="form-check-label" htmlFor="inlineCheckbox2">
            Hourly
          </label>
        </div>
      </div>
    );
  }
}

// export default CheckBox;


// import React from "react";
// import CheckBox from "../checkBox/checkBox";

class Forms extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      emails: "",
      alerts: "",
      submit: this.props.value,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleAlertButtonClick = () => {
    const data = this.state.alerts;

    // axios.post("/test", data);
    if (this.state.submit === true) {
      console.log(data);
    }
  };

  handleSaveButtonClick = () => {
    const data = this.state.alerts;

    // axios.post("/save", data);
    if (this.state.submit === true) {
      console.log(data);
    }
  };

  handleSaveChange = (e) => {
    let { name, value } = e.target;
    this.setState({ ...this.state, [name]: value });
    console.log(this.state)
  };

  handleSubmit = (event) => {
    let submit = this.state.submit;
    if (submit !== true) {
      alert("This form is invalid please try again!");
      event.preventDefault();
    } else {
      alert("Your form has been succesfully submitted");
    }
  };

  render() {
    //const { checkCheckBox } = this.props;

    return (
      <div>
        {" "}
        <form className="needs-validation" onSubmit={this.handleSubmit}>
          <div className="form-group" style={{ paddingTop: "40px" }}>
            <label htmlFor="alertInput"> Alert Message</label>
            <input
              name="alerts"
              type="text"
              className="form-control"
              id="alertInput"
              placeholder="Alert Message"
              onChange={this.handleSaveChange}
              ref={(input) => this.input}
              required
            />
          </div>

          <CheckBox required />

          <div className="form-group" style={{ paddingTop: "30px" }}>
            <label htmlFor="emailInput">Email Recipients</label>
            <input
              name="emails"
              type="email"
              multiple
              className="form-control"
              id="emailInput"
              placeholder="Email Recipients"
              required
              onChange={this.handleSaveChange}
            />
          </div>
          <div
            className="d-grid gap-2 d-md-flex justify-content-md-end"
            style={{ paddingTop: "25px" }}
          >
            <button
              className="btn btn-primary me-md-2"
              type="submit"
              onClick={this.handleAlertButtonClick}
            >
              Test Alert
            </button>
            <button
              className="btn btn-primary"
              type="submit"
              onClick={this.handleSaveButtonClick}
            >
              Save
            </button>
          </div>
        </form>
      </div>
    );
  }
}

export default Forms;