Использование функционала setState в формах - PullRequest
Новая
       0

Использование функционала setState в формах

0 голосов
/ 22 января 2019

Я изучал реакцию и на setState я узнал о функционале setState, я хотел реализовать это в формах, чтобы увидеть, как он работает (, пожалуйста, не приводите мне счетчик примеров, я вижу, может ли это быть реализовано в формах только для использования ). Я пытаюсь сделать это, потому что я видел похожий подход в github, но он включил все вещи в один объект, поэтому он делает это легко. Но мой вопрос заключается в том, могу ли я сделать то же самое, но без включения свойств формы, таких как имя пользователя и пароль внутри объекта. Я говорю об этом репо => Форма контейнера . Что вы, люди, рекомендуете? Как я могу сделать? Спасибо!

Мой код формы такой:

index.js 

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

class Form extends Component{
    constructor(props){
        super(props);
        this.state = {
            name: "",
            age: "",
        };
    }

    handleInput = (e) => {
        let name = e.target.name;
        let value = e.target.value;
        this.setState({ [name]: value });
    } 

//The block where i am trying to implement the function setState
    handleInput = (e) => {
        let name = e.target.name;
        let value = e.target.value;
        this.setState( state => ({
            name:{state.name,[name]: value}
        }));
    } 


    render(){
        return(
            <div>
                <label> Name:
                <input type="text" name="name" value={this.state.name} onChange={this.handleInput} />
                </label>
                <br />
                <label> Age:
                <input type="text" name="age" value={this.state.age} onChange={this.handleInput} />
                </label>
            </div>
        );
    }
}

ReactDOM.render(<Form />, document.getElementById('root'))

1 Ответ

0 голосов
/ 22 января 2019 
handleInput = ({ target }) => {
  const { name, value } = target;

  this.setState({ [name]: [value] });
}

//Can even boil down to one line of code
handleInput = ({ target }) => this.setState({ [target.name]: [target.value] })

Вы можете попробовать код выше.Это довольно кратко и не уверен, как уточнить это.О моем подходе мы можем обсудить в комментарииниже: 

handleInput = ({ target }) => {
  const { name, value } = target;

  this.setState(prevState => ({ ...prevState, [name]: value }));
}
...