Question

我一直在学习反应，并在setState上了解函数setState，我想在表单上实现此功能以查看其工作方式（请不要给我反例，我正在查看是否可以以仅供使用的形式实现）。我之所以尝试这样做，是因为我在github中看到了类似的方法，但是他将所有内容都包含在单个对象中，所以他很容易做到。但是我的问题是我可以做同样的事情，但是没有在对象内部包括用户名和密码之类的表单属性。我说的是这个仓库=> 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))

上面的代码是从您评论的链接中复制的，在我们的情况下，应按以下方式实现：

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

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

在表单中使用函数setState

1 个答案: