Блог

Главная - Вопросы по программированию - Как передать состояние семантического флажка (true/false) в e.цель

Как передать состояние семантического флажка (true/false) в e.цель

#javascript #reactjs #email #semantic-ui

Вопрос:

Цель: Передать значение состояния.TNC и state.promos в форму emailjs.send. Отправленное электронное письмо должно содержать «true», если флажок установлен, и «false», если нет.

Я теряюсь в словах относительно того, что мне нужно в Google, чтобы найти решение, включающее семантические и электронные сообщения…

Вот мой код, который, как я думал, сделает это за меня.

 value={this.state.promos}

value={this.state.TNC}

Это состояния, которые они должны возвращать в качестве значений и передаваться в сообщения электронной почты e.target 

 this.state = {
      TNC: false,
      promos: true,
    };

Код для двух флажков (я пробовал их со значением и без значения={this.state.ТНК})

 <Form.Group widths="equal">
          <Form.Field>
            <Checkbox
              label="I agree to the Terms and Conditions"
              required
              control={Checkbox}
              data="TNC"
              onChange={this.onToggle}
              value={this.state.TNC}
            />
          </Form.Field>
          <Form.Field>
            <Checkbox
              label="Send me occasional updates and promotions"
              defaultChecked
              control={Checkbox}
              data="promos"
              value={this.state.promos}
              onChange={this.onTogglePromos}
            />
          </Form.Field>
        </Form.Group>

Вот полный код, и вы можете найти полуфункциональную версию формы по адресу https://test.ghostrez.net

 import emailjs from "emailjs-com";
import { Component } from "react";
import { Button, Checkbox, Form, Input, TextArea } from "semantic-ui-react";

export default class ContactUs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      TNC: false,
      promos: true,
    };
  }
  onToggle = () => {
    const TNC = !this.state.TNC;
    this.setState({ TNC });
  };
  onTogglePromos = () => {
    const promos = !this.state.promos;
    this.setState({ promos });
  };
  sendEmail = (e, props) => {
    e.preventDefault();
    if (this.state.TNC !== false) {
      return emailjs
        .sendForm("tester", "testiTemp", e.target, "user_EPYkKnHwiytfdolol565ljQTCbJkzO7YD")
        .then(
          (result) => {
            alert("Email sent successfully!");
            e.target.reset();
          },
          (error) => {
            alert("Email send failed... :( I had one job...");
          }
        );
    } else {
      return alert(
        "You need to accept the Terms and Conditions before proceeding."
      );
    }
  };

  render() {
    return (
      <Form onSubmit={this.sendEmail}>
        <Form.Group widths="equal">
          <Form.Field
            id="firstName"
            control={Input}
            label="First name"
            name="firstName"
            placeholder="First name"
            required
          />
          <Form.Field
            id="lastName"
            name="lastName"
            control={Input}
            label="Last name"
            placeholder="Last name"
          />
        </Form.Group>
        <Form.Group widths="equal">
          <Form.Field
            id="Email"
            control={Input}
            label="Email"
            name="email"
            placeholder="joe@schmoe.com"
            required
          />
          <Form.Field
            id="Phone"
            control={Input}
            label="Phone"
            name="phone"
            placeholder="0469 420 689"
            required
          />
        </Form.Group>
        <Form.Field
          id="Message"
          control={TextArea}
          label="Message"
          name="message"
          placeholder="Message"
          required
        />
        <Form.Group widths="equal">
          <Form.Field>
            <Checkbox
              label="I agree to the Terms and Conditions"
              required
              control={Checkbox}
              data="TNC"
              onChange={this.onToggle}
              value={this.state.TNC}
            />
          </Form.Field>
          <Form.Field>
            <Checkbox
              label="Send me occasional updates and promotions"
              defaultChecked
              control={Checkbox}
              data="promos"
              value={this.state.promos}
              onChange={this.onTogglePromos}
            />
          </Form.Field>
        </Form.Group>
        <Form.Field
          id="Submit"
          control={Button}
          type="submit"
          value="submit"
          positive
          content="Submit"
        />
      </Form>
    );
  }
}

Спасибо вам за вашу помощь, я действительно ценю это.

Ответ №1:

Для того, чтобы проверить , не является ли свойство value «но checked «, попробуйте с помощью этого :

         <Checkbox
          label="I agree to the Terms and Conditions"
          required
          control={Checkbox}
          data="TNC"
          onChange={this.onToggle}
          checked={this.state.TNC}
        />

Комментарии:

1. все еще не переношу значения 🙁 я пробовал изменить data на name и все равно ничего

Ответ №2:

Это решение, которое сработало для меня, хотя оно отображается только в том случае, если установлено значение true (флажок установлен) У меня есть дополнительная id ценность и value amp; checked оба как (this.state.*state*)

Мое решение было следующим

 <Form.Group widths="equal">
          <Form.Field>
            <Checkbox
            id="Accept_TnCs"
              label="I agree to the Terms and Conditions"
              required
              control={Checkbox}
              name="TNC"
              value={this.state.TNC}
              checked={this.state.TNC}
              onChange={this.onToggle}
            />
          </Form.Field>
          <Form.Field>
            <Checkbox
            id="Accept_Promos"
              label="Send me occasional updates and promotions"
              defaultChecked
              control={Checkbox}
              name="promos"
              value={this.state.promos}
              checked={this.state.promos}
              onChange={this.onTogglePromos}
            />
          </Form.Field>
        </Form.Group>

Метки: