Question

React：重构多个表单输入

2018-11-26

510

javascript reactjs jsx

我正在学习 React。我正在做下面的一个折射器练习：

    import React, { Component } from "react";

    import "./App.css";

    class App extends Component {
      state = {
        form: {
          firstName: "",
          lastName: "",
          email: "",
          password: ""
        }
      };

      handleFirstNameChange = e => {
        this.setState({
          form: {
            firstName: e.target.value
          }
        });
      };

      handleLastNameChange = e => {
        this.setState({
          form: {
            lastName: e.target.value
          }
        });
      };

      handleEmailChange = e => {
        this.setState({
          form: {
            email: e.target.value
          }
        });
      };

      handlePasswordChange = e => {
        this.setState({
          form: {
            password: e.target.value
          }
        });
      };

      validateForm = () => {
        const formInputs = ["firstName", "lastName", "email", "password"];

        for (let i = 0; i < formInputs.length; i++) {
          const inputName = formInputs[i];

          if (!this.state.form[inputName].length) {
            return false;
          }
        }

        return true;
      };

      handleSubmit = () => {
        if (this.validateForm()) {
          console.log("Success!");
        } else {
          console.log("Failure!");
        }
      };

      render() {
        return (
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <form
              className="Form"
              onSubmit={e => {
                e.preventDefault();
                this.handleSubmit();
              }}
            >
              <input name="firstName" onChange={this.handleFirstNameChange} />
              <input name="lastName" onChange={this.handleLastNameChange} />
              <input name="email" onChange={this.handleEmailChange} />
              <input name="password" onChange={this.handlePasswordChange} />
              <button className="no-padding">Submit</button>
            </form>
          </div>
        );
      }
    }

    export default App;

我将其重构为：

  import React, { Component } from "react";

  import "./App.css";

  class App extends Component {
    state = {
      form: {
        firstName: "",
        lastName: "",
        email: "",
        password: ""
      }
    };

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

    validateForm = () => {
      const formInputs = ["firstName", "lastName", "email", "password"];

      for (let i = 0; i < formInputs.length; i++) {
        const inputName = formInputs[i];

        if (!this.state.form[inputName].length) {
          return false;
        }
      }

      return true;
    };

    handleSubmit = () => {
      if (this.validateForm()) {
        console.log("Success!");
      } else {
        console.log("Failure!");
      }
    };

    render() {
      return (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <form
            className="Form"
            onSubmit={e => {
              e.preventDefault();
              this.handleSubmit();
            }}
          >
            <input name="firstName" onChange={this.handleChange} />
            <input name="lastName" onChange={this.handleChange} />
            <input name="email" onChange={this.handleChange} />
            <input name="password" onChange={this.handleChange} />
            <button className="no-padding">Submit</button>
          </form>
        </div>
      );
    }
  }

  export default App;

出于某种原因，我在提交表单时收到错误 -

TypeError: Cannot read property 'length' of undefined

我想知道我的代码中哪里做错了？

还有没有更好的方法来进一步重构代码？

Answer 1

这是因为您以错误的方式更新状态，每次更新时您都会从表单数组中删除所有其他键值对，而不是仅更新任何一个键值。

像这样更新：

handleChange = e => {
  const { name, value } = e.target;
  this.setState(prevState => ({
    form: {

      // all other key value pairs of form object
      ...prevState.form,

      // update this one specifically
      [name]: value
    }
  }));
};

检查此代码片段以获得更好的想法：

let obj1 = { a:1, b:2 };
let obj2 = { a:1, b:2 };

let temp = 'a';

obj1 = { [temp]: 10 };

obj2 = { ...obj2, [temp]: 10 };

console.log('obj1', obj1);
console.log('obj2', obj2);

Answer 2

这是有效的代码片段。有两个错误，一个是在 handleChange 事件中设置了正确的状态值。电子邮件地址状态属性名称在两个地方不同

https://codesandbox.io/s/5kz5wko31k