在表单中使用函数式 setState

Question

我一直在学习 React，在 setState 上我了解了功能性 setState，我想在表单上实现它以查看它是如何工作的（请不要给我反例，我看到如果它可以以仅供使用的形式实现）。我正在尝试这样做，因为我在 github 中看到了类似的方法，但他已将所有内容包含在单个对象中，因此他很容易做到。但我的问题是我可以做同样的事情但不包括我的表单属性，如对象内的用户名和密码。我说的是这个 repo => Form Container。大家推荐什么？我该怎么办？谢谢！

我的表单代码是这样的：

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'))

Answer 1

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] })

您可以试试上面的代码。它非常简洁，不知道如何详细说明。我们可以在评论

中讨论我的方法

更新：

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

以上代码是从您评论的 link 中复制的，在我们的例子中，应该按如下方式实现：

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

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

在表单中使用函数式 setState

Using functional setState in forms

setstate

reactjs