Блог

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

пожалуйста ,будьте добры … я знаю, что сделал что-то ужасно неправильное, это мой первый вопрос в stackoverflow;

  import React, { Component } from 'react';  export default class productType extends Component {  constructor(props){  super(props);  this.handleChange = this.handleChange.bind(this);  this.onChangeType = this.onChangeType.bind(this);  this.onChangeAttribute = this.onChangeAttribute.bind(this);  this.onSubmit = this.onSubmit.bind(this);   this.state= {  type: '',  book:'',  size: '',  height: '',  width: '',  lenght: ''   } }  onChangeType(e) {  this.setState({  type:e.target.value  }) }  onChangeAttribute(e) {  this.setState({  [e.target.name]:e.target.value,  [e.target.name]:e.target.value,  [e.target.name]:e.target.value,  [e.target.name]:e.target.value,  [e.target.name]:e.target.value   }) }  onSubmit(e) {  e.preventDefault();   const obj = {   [e.target.name]:this.state.book,  [e.target.name]:this.state.size,  [e.target.name]:this.state.height,  [e.target.name]:this.state.width,  [e.target.name]:this.state.lenght    }  console.log(obj); }  

я пытался и задокументировал все, и все еще не могу решить эту проблему

 renderSelectedForm(type) {  switch(type) {     case '1':  return lt;form name="form_name1" gt;  lt;label for="fname"gt;Weightlt;/labelgt;  lt;input type="text" name="book"  value={ this.state.book}    onChange={this.onChangeAttribute}gt;lt;/inputgt;  lt;/formgt;     case '2':  return lt;form name="form_name1" id="2" gt;  lt;label for="fname"gt;Size(MB)lt;/labelgt;  lt;input type="text" name="size"  value = {this.state.size}   onChange={this.onChangeAttribute}gt;lt;/inputgt;  lt;/formgt;;   case '3':  return lt;form name="form_name1" id="3" gt;  lt;label for="height"gt;Heightlt;/labelgt;  lt;input type="number" name="height" required  onChange={this.onChangeAttribute}/gt;   lt;label for="width"gt;Widthlt;/labelgt;  lt;input type="number" name="width" required  onChange={this.onChangeAttribute}/gt;   lt;label for="length"gt;Lengthlt;/labelgt;  lt;input type="number" name="length" required   onChange={this.onChangeAttribute}/gt;  lt;/formgt;;    default:  return null;     } }   handleChange(e) { this.setState({selectedValue: e.target.value}); }    render(){  return (  lt;divgt;   lt;form gt;  lt;select id="type" value={this.state.selectedValue} onChange={this.handleChange}gt;  lt;option value="0" selected="selected"gt;Selectlt;/optiongt;  lt;option value="1"gt;Booklt;/optiongt;  lt;option value="2"gt;DVDlt;/optiongt;  lt;option value="3"gt;Furniturelt;/optiongt;  lt;/selectgt;  lt;/formgt;  {this.renderSelectedForm(this.state.selectedValue)}   lt;button onClick={this.onSubmit}gt;ADDlt;/buttongt;  lt;/divgt;  )  }   }   

P. S: это мой первый вопрос по stackoverflow

У меня нет опыта работы с реакцией, но я думаю, что вы onSubmit() неправильно называете метод. Попробуй это:

 lt;button onClick={onSubmit}gt;ADDlt;/buttongt;  

или

Если вы хотите использовать this , вам нужно изменить свой onSubmit() метод, например:

 onSubmit = (e) =gt; {  e.preventDefault();    // your code  }  

Ошибка в вашей функции onSubmit.

 onSubmit(e) {  e.preventDefault();   const obj = {   [e.target.name]:this.state.book,  [e.target.name]:this.state.size,  [e.target.name]:this.state.height,  [e.target.name]:this.state.width,  [e.target.name]:this.state.lenght    }  console.log(obj); }  

Когда вы пишете

 lt;button onClick={this.onSubmit}gt;ADDlt;/buttongt;  

Вы назначаете ссылку на функцию onSubmit обработчику событий onClick. Итак, при нажатии кнопки вызывается обработчик событий onClick, и, как и любой другой обработчик событий, он предоставляет вам объект события, который вы принимаете как «e». Теперь этот объект события был вызван кнопкой, т. Е. «e.target» здесь фактически ссылается на объект кнопки в вашем DOM.

И поскольку вы не присвоили ему никакого имени, поддерживающего его.

 e.target.name = null  

Следовательно,

 [e.target.name]:this.state.book  

по сути, означает,

 null: lt;some_valuegt;  

Итак, объект, который вы создаете, в основном выглядит примерно так.

 {  null: null }  

И когда он регистрируется в консоли, вероятно, вы видите что-то вроде этого,

 {  "": lt;some_valuegt; }  

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

 // Change this: console.log(obj) // To: console.log(this.state)  /* Or if you want to process your state and then display it then store the value in your object like this: */ const obj = { ...this.state } // then do your stuff  

Дайте мне знать, если вам понадобятся дополнительные разъяснения.