javascript - 如何在控制台中显示对象？

Question

我想在控制台中显示对象函数但它什么也没显示你能告诉我我做错了什么吗？

请善待..我知道我做错了什么，这是我在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  <form name="form_name1" >
              <label for="fname">Weight</label>
              <input type="text" name="book"
              value={ this.state.book}
              
              onChange={this.onChangeAttribute}></input>
              </form>
  

    case '2':
      return  <form name="form_name1" id="2" >
              <label for="fname">Size(MB)</label>
              <input type="text" name="size"
              value = {this.state.size}  
              onChange={this.onChangeAttribute}></input>
              </form>;

    case '3':
      return  <form name="form_name1" id="3"  >
              <label for="height">Height</label>
              <input type="number"  name="height" required
              onChange={this.onChangeAttribute}/>

              <label for="width">Width</label>
              <input type="number"  name="width" required
              onChange={this.onChangeAttribute}/>

              <label for="length">Length</label>
              <input type="number"  name="length" required 
              onChange={this.onChangeAttribute}/>
            </form>;
      
    default:
      return null;

     
  }
}

 handleChange(e) { this.setState({selectedValue: e.target.value}); }


  render(){
    return (
        <div>

            <form >
               <select id="type" value={this.state.selectedValue} onChange={this.handleChange}>
                   <option value="0" selected="selected">Select</option>
                   <option value="1">Book</option>
                   <option value="2">DVD</option>
                   <option value="3">Furniture</option>
               </select>
            </form>
            {this.renderSelectedForm(this.state.selectedValue)}

            <button onClick={this.onSubmit}>ADD</button>
        </div>
    )
 } 

}

PS：这是我关于stackoverflow的第一个问题

标签： javascriptreactjsclassstate

Answer 1

错误在您的 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);
}

当你写

<button onClick={this.onSubmit}>ADD</button>

您正在将 onSubmit 函数的引用分配给事件处理程序 onClick。因此，当按下按钮时，onClick 事件处理程序会调用，并且与任何其他事件处理程序一样，它会为您提供一个事件对象，您将其视为“e”。现在，这个事件对象被按钮调用了，也就是说，这里的“e.target”实际上引用了你的DOM中的按钮对象。

并且由于您没有为其分配任何名称道具。

e.target.name = null

因此，

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

本质上意味着，

null: <some_value>

因此，您创建的对象基本上是这样的。

{
  null: null
}

当它控制台日志时，您可能会看到类似这样的内容，

{
  "": <some_value>
}

我认为您正在尝试在用户在表单中输入任何内容后查看存储在您的状态中的值。在这种情况下，您可以简单地 console.log 状态值。

// 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

如果您需要更多说明，请告诉我。