это мой файл React worksection.js и его функция, сделанная вместо класса

export default function WorkSection() { 

Теперь мне нужно сделать здесь конструктор, чтобы инициализировать состояние и выполнять функциональные операции, которые я буду вызывать по нажатию кнопки

  return ( {amp}lt;div className={classes.section}{amp}gt; {amp}lt;GridContainer justify="center"{amp}gt; {amp}lt;GridItem cs={12} sm={12} md={8}{amp}gt; {amp}lt;h2 className={classes.title}{amp}gt;Work with us{amp}lt;/h2{amp}gt; {amp}lt;h4 className={classes.description}{amp}gt; BAIOS BAY LLP is looking for collaborations with you, Contact us today ! {amp}lt;/h4{amp}gt; {amp}lt;form onSubmit={this.handleSubmit}{amp}gt; {amp}lt;GridContainer{amp}gt; {amp}lt;GridItem xs={12} sm={12} md={6}{amp}gt; {amp}lt;CustomInput labelText="Your Name" id="name" onChange={this.handleChange} defaultValue={this.state.name} formControlProps={{ fullWidth: true }} /{amp}gt; {amp}lt;/GridItem{amp}gt; {amp}lt;/GridContainer{amp}gt; {amp}lt;/div{amp}gt; ); } 

это моя форма, в которой я отправляю имя и добавляю щелчок кнопки, так как я могу инициализировать состояние и функции для вызова функций onclick, где мои функции таковы:

  constructor(props) { super(props); this.state = { name : ''} } handleChange = event ={amp}gt; { this.setState({ [event.target.id]: event.target.value }); } handleClick = event ={amp}gt; { this.setState({ [event.target.id]: event.target.checked }); } handleSubmit = event ={amp}gt; { event.preventDefault(); if (this.state.username === '') { this.showMessage('Info', "Username is empty"); return; } } 

Мне нужно разместить эту функцию, и я сделал это с помощью класса worksection, но как это сделать с помощью функции экспорта по умолчанию Worksection ()

То, что вы, вероятно, ищете, называется реакцией хуков . Они позволяют использовать управление состоянием в ваших функциональных компонентах. Они классные, потому что они легкие по сравнению с классными компонентами.

Сначала импортируйте функцию useState из react :

import { useState } from 'react'

Затем перед возвращением добавьте следующие строки: const [name, setName] = useState('');

Первым аргументом здесь является имя вашего свойства состояния, а вторым — функция для его изменения.

Итак, вместо этого:

 handleChange = event ={amp}gt; { this.setState({ [event.target.id]: event.target.value }); } 

Напишите это:

 handleChange = event ={amp}gt; { setName(event.target.value); } 

Если вы хотите сделать его более сложным, вы можете переписать свой хук из этого:

const [name, setName] = useState('');

к этому:

 const [state, setState] = useState({ name: '', checked: false, }); 
westfalensgod

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,