Не удалось обновить данные формы в React

Question

Я использую реакцию, чтобы принять ввод от пользователя. И когда пользователь отправляет, я хочу избавиться от формы и отобразить введенные пользователем данные.

Я не могу видеть данные, введенные пользователем, на моей странице результатов. Я загрузил скриншоты и код ниже.

class Form extends React.Component {
    constructor(props){
        super(props)
        this.state = {isFormOn: true, isResult: false , firstname: "", lastname: ""};
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    handleClick(){
        this.setState(state => ({
            isFormOn: !state.isFormOn,
            isResult: !state.isResult
        }));
    }

    handleChange({ event }) {
        this.setState({
        [event.target.name]: event.target.value
        });
     }


    render(){
        return(
            <div>
                { this.state.isFormOn && (
                   <div>
                     First name :
                     <input type="text" name="firstname" onChange={this.handleChange}  /><br />
                     Last name :
                     <input type="text" name="lastname" onChange={this.handleChange}  /><br />
                     <br />
                     <button onClick={this.handleClick}>
                        {this.state.isFormOn ? 'ON' : 'OFF'}
                     </button>
                   </div>
                )}
                { this.state.isResult && (
                   <div>
                       <h4>The name entered is : {this.state.firstname} {this.state.lastname} </h4>
                       <button onClick={this.handleClick}>
                           {this.state.isFormOn ? 'ON' : 'OFF'}
                       </button>
                   </div>
                )}
            </div>
        );
    }
}

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

Визуализация формы для принятия ввода пользователя

Результат введенной пользователем информации

Answer 1

Ваш обработчик события (handleChange) уничтожает объект события и пытается извлечь из него свойство с именем event, которого не существует.

Вам нужновместо этого использовать объект события напрямую:

handleChange(event) {
  this.setState({
    [event.target.name]: event.target.value
  });
}