Javascript 如何使用钩子将该类组件实现为功能组件？_Javascript_Reactjs_React Hooks

Javascript 如何使用钩子将该类组件实现为功能组件？

javascript reactjs

Javascript 如何使用钩子将该类组件实现为功能组件？,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我正在创建一个包含多个字段、名、姓、电子邮件和密码的注册表单：代码：然后为每个组件设置不同的函数以更改状态，而不是类组件中的一个函数handleChange： const handleFirstNameChange = (e) => { setFirstName(e.target.value) } const handleFirstNameChange = (e) => { setLastName(e.target.value) } const handleEmail

我正在创建一个包含多个字段、名、姓、电子邮件和密码的注册表单：

代码：

然后为每个组件设置不同的函数以更改状态，而不是类组件中的一个函数

handleChange

：

const handleFirstNameChange = (e) => {
  setFirstName(e.target.value)
}

const handleFirstNameChange = (e) => {
  setLastName(e.target.value)
}

const handleEmailChange= (e) => {
  setEmail(e.target.value)
}

const handlePasswordChange= (e) => {
  setPassword(e.target.value)
}

这太冗长了，有没有办法用钩子在经典组件中实现相同的东西？？？

只需在

React.usState中存储一个对象即可：
const[formData，setFormData]=useState({
名字：''，
姓氏：“”，
电子邮件：“”，
密码：“”，
});

然后对handleChange
功能使用相同的逻辑：
功能手柄更改（e）{
setFormData（{…formData，[e.target.id]：e.target.value}）
}
使用功能组件时，您不需要将状态拆分为多个状态，尤其是使用表单时，您可以按如下方式操作：
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';


const SignUp = () => {
  const [state, setState] = React.useState({
      firstName: '',
      lastName: '',
      email: '',
      password: '',
   })

   const handleChange =(e) => {
     e.persist();
     setState(prevState => ({
       ...prevState,
       [e.target.id]: e.target.value
    }));
   }

   const handleSubmit = () => {
     console.log(state);
   }

   return (
     <form onSubmit={handleSubmit}>
         <h5>Sign Up</h5>

          <div className="input-field">
              <label htmlFor="firstName">First Name</label>
              <input type="text" id="firstName" onChange={handleChange}/>
         </div>

         <div className="input-field">
             <label htmlFor="lastName">Last name</label>
             <input type="text" id="lastName" onChange={handleChange}/ >
         </div>

         <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id="email" onChange={handleChange} />
         </div>

         <div className="input-field">
             <label htmlFor="password">Password</label>
             <input type="password" id="password" onChange={handleChange} />
         </div>

         <button className="btn pink z-depth-0 lighten-1 text-grey">Sign up</button>
     </form>
  )
}

render(<SignUp />, document.getElementById('root'));


import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
常量注册=（）=>{
常量[状态，设置状态]=React.useState({
名字：''，
姓氏：“”，
电子邮件：“”，
密码：“”，
})
常数handleChange=（e）=>{
e、 坚持（）；
设置状态（prevState=>({
…国家，
[e.target.id]：e.target.value
}));
}
常量handleSubmit=（）=>{
console.log（状态）；
}
返回(
注册
名字
姓
电子邮件
密码
注册
)
}
render（，document.getElementById（'root'））；

我刚刚为email和assword jsx节点添加了缺少的id，并将状态更改为使用useState，但保留了以前在类组件中定义的形状。这样，你就不需要做太多的改变来让它像以前一样工作
请参见
您可以使用useReducer执行此操作：
import React, { useReducer } from "react";

const SignUp = () => {
  function reducer(currentState, newState) {
    return { ...currentState, ...newState };
  }

  const [{ firstName, lastName, email, password }, setState] = useReducer(
    reducer,
    {
      firstName: "",
      lastName: "",
      email: "",
      password: ""
    }
  );

  const handleSubmit = event => {
    event.preventDefault();
    console.log("firstName: ", firstName);
    console.log("lastName: ", lastName);
    console.log("email: ", email);
    console.log("password: ", password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h5>Sign Up</h5>

      <div className="input-field">
        <label htmlFor="firstName">First Name</label>
        <input
          type="text"
          value={firstName}
          id="firstName"
          onChange={e => setState({ firstName: e.target.value })}
        />
      </div>

      <div className="input-field">
        <label htmlFor="lastName">Last Name</label>
        <input
          type="text"
          value={lastName}
          id="lastName"
          onChange={e => setState({ lastName: e.target.value })}
        />
      </div>

      <div className="input-field">
        <label htmlFor="email">Email</label>
        <input
          type="email"
          value={email}
          onChange={e => setState({ email: e.target.value })}
        />
      </div>

      <div className="input-field">
        <label htmlFor="password">Password</label>
        <input
          type="password"
          value={password}
          onChange={e => setState({ password: e.target.value })}
        />
      </div>

      <button className="btn pink z-depth-0 lighten-1 text-grey">
        Sign up
      </button>
    </form>
  );
};

export default SignUp;

import React，{useReducer}来自“React”；
常量注册=（）=>{
函数缩减器（currentState、newState）{
返回{…currentState，…newState}；
}
const[{firstName，lastName，email，password}，setState]=useReducer(
减速器，
{
名字：“，
姓氏：“，
电邮：“，
密码：“
}
);
const handleSubmit=事件=>{
event.preventDefault（）；
log（“firstName:”，firstName）；
log（“lastName:”，lastName）；
控制台日志（“电子邮件：”，电子邮件）；
console.log（“密码：”，密码）；
};
返回(
注册
名字
setState（{firstName:e.target.value}）
/>
姓
setState（{lastName:e.target.value}）
/>
电子邮件
setState（{email:e.target.value}）
/>
密码
setState（{密码：e.target.value}）}
/>
注册
);
};
导出默认注册；

这将帮助您感谢您，只需要我需要的34秒，但有没有办法不使用库@Kalhan.Toress很高兴知道这个包裹@Kalhan.Toress谢谢分享！关于在没有库的情况下使用它，请看我的答案，这是同一件事，您也做了同样的事，但使用id（最好使用软件包中的名称，没有太多更改）这是我第一次知道我可以在功能组件中使用setState， Thanks@CodeEagle不能在功能组件中使用基于类的组件setState
。只是reactuseState
钩子已经用[state，setState]
@CodeEagle进行了实例化。请记住，这是我选择的setState，而不是您从类组件中知道的setState！我的意思是，我想把它命名为setwhateyouwant
，这只是一个局部变量，它接收一个函数，允许你设置你的状态。例如：const[something，setSomething]=useState（'defaultState'）
然后使用setSomething（'newState'）import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';


const SignUp = () => {
  const [state, setState] = React.useState({
      firstName: '',
      lastName: '',
      email: '',
      password: '',
   })

   const handleChange =(e) => {
     e.persist();
     setState(prevState => ({
       ...prevState,
       [e.target.id]: e.target.value
    }));
   }

   const handleSubmit = () => {
     console.log(state);
   }

   return (
     <form onSubmit={handleSubmit}>
         <h5>Sign Up</h5>

          <div className="input-field">
              <label htmlFor="firstName">First Name</label>
              <input type="text" id="firstName" onChange={handleChange}/>
         </div>

         <div className="input-field">
             <label htmlFor="lastName">Last name</label>
             <input type="text" id="lastName" onChange={handleChange}/ >
         </div>

         <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" id="email" onChange={handleChange} />
         </div>

         <div className="input-field">
             <label htmlFor="password">Password</label>
             <input type="password" id="password" onChange={handleChange} />
         </div>

         <button className="btn pink z-depth-0 lighten-1 text-grey">Sign up</button>
     </form>
  )
}

render(<SignUp />, document.getElementById('root'));


import React, { useReducer } from "react";

const SignUp = () => {
  function reducer(currentState, newState) {
    return { ...currentState, ...newState };
  }

  const [{ firstName, lastName, email, password }, setState] = useReducer(
    reducer,
    {
      firstName: "",
      lastName: "",
      email: "",
      password: ""
    }
  );

  const handleSubmit = event => {
    event.preventDefault();
    console.log("firstName: ", firstName);
    console.log("lastName: ", lastName);
    console.log("email: ", email);
    console.log("password: ", password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h5>Sign Up</h5>

      <div className="input-field">
        <label htmlFor="firstName">First Name</label>
        <input
          type="text"
          value={firstName}
          id="firstName"
          onChange={e => setState({ firstName: e.target.value })}
        />
      </div>

      <div className="input-field">
        <label htmlFor="lastName">Last Name</label>
        <input
          type="text"
          value={lastName}
          id="lastName"
          onChange={e => setState({ lastName: e.target.value })}
        />
      </div>

      <div className="input-field">
        <label htmlFor="email">Email</label>
        <input
          type="email"
          value={email}
          onChange={e => setState({ email: e.target.value })}
        />
      </div>

      <div className="input-field">
        <label htmlFor="password">Password</label>
        <input
          type="password"
          value={password}
          onChange={e => setState({ password: e.target.value })}
        />
      </div>

      <button className="btn pink z-depth-0 lighten-1 text-grey">
        Sign up
      </button>
    </form>
  );
};

export default SignUp;