Отправить форму входа, сделанную с компонентами React

Question

Я создаю форму входа с некоторыми компонентами ввода и компонентом кнопки.

SignIn.js

class SignIn extends Component {
  render() {
    return (
      <article className="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-30-l h-auto h-auto-l h-auto-m h-auto-m h-auto-ns shadow-5 center">
        <main className="pa4 black-80">
          <legend className="f2 fw6 ph0 mh0 tc">Sign In</legend>

          <VerticalInputComponent id_name="signin_email" input_label="Email" />
          <VerticalInputComponent id_name="signin_password" input_label="Password" />

          <div className="tc mt3 mt3-l mt3-m mt3-ns">
            <ButtonComponent button_value="Sign In" />
          </div>
        </main>
      </article>
    );
  }
}

VerticalInputComponent.js

class VerticalInputComponent extends Component {
  render() {
    return(
      <form className="pl4 pr4 pt4 pb2 black-80 w-100 measure">
        <div className="measure">
          <label htmlFor={ this.props.id_name } className="f6 b db mb2">{ this.props.input_label }
            { this.props.isOptional
              ? <span className="normal black-60">(optional)</span>
              : null
            }
          </label>
          <input id={ this.props.id_name } className="input-reset ba b--black-20 pa2 mb2 db w-100" type="text" aria-describedby="name-desc" />
        </div>
      </form>
    )
  }
}

ButtonComponent.js

class ButtonComponent extends Component {
  render() {
    return (
      <div>
        <input
          className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
          type="submit"
          value={ this.props.button_value }
        />
      </div>
    );
  }
}

Вопрос в том, как я могу отправить адрес электронной почты и пароль на почтовый запрос?Я знаю, как сделать это на обычном HTML, но я не знаю, как это сделать в React.Я предполагаю, что мне нужно использовать Redux или State, но я не знаю синтаксис.Случайные примеры, которые я читаю, не имеют для меня смысла, по крайней мере, на данный момент.

Answer 1

Redux или даже состояние не нужно отправлять форму.

Вы должны обернуть весь элемент формы в один form, даже если они вложены в пользовательские компоненты.У вас было 2 формы, по одной на каждый input, но вы хотите отправить только 1 запрос POST.

Также не забудьте включить атрибут name в элементы формы input, потому что ониэто имена свойств, которые сервер увидит в вашем запросе POST.

Обратите внимание, что e.preventDefault(); предназначен для предотвращения обновления окна, и мы не хотим этого в одностраничном приложении.

class VerticalInputComponent extends React.Component {
  render() {
    return(
      <div className="measure">
        <label htmlFor={ this.props.id_name } className="f6 b db mb2">{ this.props.input_label }
          { this.props.isOptional
            ? <span className="normal black-60">(optional)</span>
            : null
          }
        </label>
        <input id={ this.props.id_name } name={this.props.id_name} className="input-reset ba b--black-20 pa2 mb2 db w-100" type="text" aria-describedby="name-desc" />
      </div>
    )
  }
}

class ButtonComponent extends React.Component {
  render() {
    return (
      <div>
        <input
          className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib"
          type="submit"
          value={ this.props.button_value }
        />
      </div>
    );
  }
}

class SignIn extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.target);
    for (var pair of data.entries()) {
      console.log(pair[0] + ': ' + pair[1]); 
    }
    fetch('/someURL', {
      method: 'POST',
      body: data,
    });
    
  }

  render() {
    return (
      <article className="br2 ba dark-gray b--black-10 mv4 w-100 w-50-m w-30-l h-auto h-auto-l h-auto-m h-auto-m h-auto-ns shadow-5 center">
        <main className="pa4 black-80">
          <legend className="f2 fw6 ph0 mh0 tc">Sign In</legend>

          <form onSubmit={this.handleSubmit}>
            <VerticalInputComponent id_name="signin_email" input_label="Email" />
            <VerticalInputComponent id_name="signin_password" input_label="Password" />
            <div className="tc mt3 mt3-l mt3-m mt3-ns">
              <ButtonComponent button_value="Sign In" />
            </div>
          </form>
        </main>
      </article>
    );
  }
}

// Render it
ReactDOM.render(
  <SignIn/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>