Я пытаюсь сделать фиктивный проект, который «добавляет сотрудника» с помощью реакции. Я использовал форму с bulma css и компонентом ввода в качестве многоразового компонента для этой формы. когда я запускаю npm start, он успешно скомпилирован, но страница никогда не загружается, и у меня, кажется, где-то в моем коде есть бесконечный цикл. может ли кто-нибудь посмотреть код и сообщить мне, что я делаю неправильно?
import React, { Component } from 'react'
import Input from './input'
class EmployeeGeneral extends Component {
state = {
Employee: { FirstName: '', LastName: '', MeliCode: '' }
}
handleSubmit = e => {
e.preventDefault()
}
handleChangeEvent = ({ currentTarget: input }) => {
const Employee = { ...this.state.Employee }
Employee[input.name] = input.value
this.setState({ Employee })
}
render() {
const { Employee } = this.state
return (
<main className = "container">
<h1 className = "title">Employee General</h1>
<form onSubmit = {this.handleSubmit}>
<div className = "columns">
<div className = "column">
<Input
name = "firstName"
label = "First Name"
value = {Employee.FirstName}
onChange = {this.handleChangeEvent}
/>
<div className = "control">
<button className = "button is-primary">Add Employee</button>
</div>
</div>
<div className = "column">
<Input
name = "lastName"
label = "Last Name"
value = {Employee.LastName}
onChange = {this.handleChangeEvent}
/>
</div>
<div className = "column">
<Input
name = "meliCode "
label = "Meli Code"
value = {Employee.MeliCode}
onChange = {this.handleChangeEvent}
/>
</div>
</div>
</form>
</main>
)
}
}
export default EmployeeGeneral
import React from 'react'
const Input = ({ name, label, onChange, value }) => {
return (
<div className = "field">
<label htmlFor = {name} className = "label">
{label}
</label>
<div className = "control">
<Input
value = {value}
onChange = {onChange}
autoFocus
id = {name}
type = "text"
className = "input"
placeholder = {label}
name = {name}
/>
</div>
<p className = "help">{label}</p>
</div>
)
}
export default Input





Вы рекурсивно используете компонент Input. Вместо этого измените внутренний Input на обычный input.
const Input = ({ name, label, onChange, value }) => {
return (
<div className = "field">
<label htmlFor = {name} className = "label">
{label}
</label>
<div className = "control">
<input
value = {value}
onChange = {onChange}
autoFocus
id = {name}
type = "text"
className = "input"
placeholder = {label}
name = {name}
/>
</div>
<p className = "help">{label}</p>
</div>
)
}
@AmirKhadem Ха-ха, пожалуйста! Я сделал это сам раньше, поэтому я признал ошибку.
кто ты! и спасибо, я застрял на этом как час!!! неопытный я думаю.