Передача значений формы редукции

Question

Я новичок в реакции и технологии сокращения. теперь приступила к созданию приложения, содержащего несколько форм редукции. Мы хотим представить простую форму со значениями.

Для Ex: форма Войти

Имя пользователя: ввод текста поле
Пароль: кнопки текстовое поле ввода
Отправить

После ввода значений в поля и нажмите на кнопку отправить, я хочу, чтобы получить имя пользователя и значения поля пароля в объектных или json-данных .. поэтому я могу сохранить его на моем сервере с помощью метода POST.

Сейчас мы используем handleSubmit(), но данные не подходят в качестве объекта

Answer 1

1 - Лучшей практики для решения входных значений делают их контроль. Что означает:

Вместо

<input type='password' /> 

Вы делаете:

<input 
    type='password' 
    value={password} 
    onChange={ event => myInputHandler(event.target.value) } 
/> 

Значение может исходить от вашего состояния, Redux государства или в качестве реквизита и т.д. Ваша функция обработчика различается в зависимости от того, где вы храните его.

Я дам вам пример с реагировать состояние:

<input 
    type='password' 
    value={this.state.password} 
    onChange={ event => this.setState({ password : event.target.value }) } 
/> 

Поэтому, когда кто-то типы, обработчик OnChange будет называться, так что ваши реакции состояние будет обновляться с входом (event.target.value) ,

2 - Если вам нужны эти значения, когда пользователь отправляет, вам необходимо обернуть эти поля ввода в элемент формы и приложить обработчик onSubmit.

onSubmitHandler(event){ 
    event.preventDefault() 
    let password = this.state.password 
    // use password or other input fields, send to server etc. 
} 

<form onSubmit={ event => this.onSubmitHandler(event) }> 
    <input 
     type='password' 
     value={this.state.password} 
     onChange={ event => this.setState({ password : event.target.value }) } 
    /> 
</form> 

Надеюсь, вы получите то, что вам нужно.

Answer 2

Если вы используете Redux для сохранения состояния используйте Redux-с затем использовать перевождь из

import React from 'react' 
import {Field, reduxForm} from 'redux-form' 
const SimpleForm = props => { 
    const {handleSubmit, submitting} = props return (
<form onSubmit={handleSubmit(e=>console.log('your form detail here', e))}> 
    <div> 
     <label>First Name</label> 
     <div> 
      <Field name="firstName" component="input" type="text" placeholder="First Name" /> 
     </div> 
    </div> 
    <div> 
     <label>Last Name</label> 
     <div> 
      <Field name="lastName" component="input" type="text" placeholder="Last Name" /> 
     </div> 
    </div> 
    <div> 
     <button type="submit" disabled={pristine || submitting}>Submit</button>   
    </div> 
</form> 
) } 

export default reduxForm({ form: 'simple'})(SimpleForm) 

Перейти здесь более подробно https://redux-form.com

Answer 3

Я поставил имя входа в качестве ключа, Я хочу использовать. Затем каждый раз, когда изменяется вход, я разрушаю событие , переданное функции onChange, и я использую имя, значение для обновления состояния. О форме submit Обязательно используйте preventDefault(); во избежание обновления страницы.

import React, { Component } from 'react' 
 

 
class FormExample extends Component { 
 
    constructor(props){ 
 
     super(props) 
 
     this.state = { 
 
      formData: {} 
 
     } 
 
    } 
 

 
    handleInputChange = ({ target: { name,value } }) => { 
 
     this.setState({ 
 
      formData: { 
 
       ...this.state.formData, 
 
       [name]: value 
 
      } 
 
     }) 
 
    } 
 

 
    handleFormSubmit = e => { 
 
     e.preventDefault() 
 
     // This is your object 
 
     console.log(this.state.formData) 
 
    } 
 

 
    render() { 
 
     return(
 
      <div> 
 
       <Form 
 
        handleSubmit={this.handleFormSubmit} 
 
        handleChange={this.handleInputChange} 
 
       /> 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
const Form = ({ handleSubmit, handleChange }) => (
 
    <form onSubmit={handleSubmit}> 
 
     <input onChange={handleChange} name="username" type="text" placeholder="Username" /> 
 
     <input onChange={handleChange} name="password" type="password" placeholder="Password" /> 
 
     <button>Submit</button> 
 
    </form> 
 
) 
 

 
export default FormExample