如何显示反应中的对象数组

Question

我有这个代码，它接受三个输入字段，当我点击提交并显示它们时，我将它们存储在一个对象中。但它只显示当前值，而不是我输入到对象数组中的所有值。

    class Emp1 extends React.Component {
      constructor(props) {
         super(props);
         this.state = {
           obj: {name :'', email: '', age: '', phone: ''},
           items: []
        }
      }

      save(e) {
        e.preventDefault();
        var obj1 = this.state.obj;
        obj1.name = ReactDOM.findDOMNode(this.refs.field.refs.name1).value;
        obj1.email = ReactDOM.findDOMNode(this.refs.field.refs.email1).value;
        obj1.age = ReactDOM.findDOMNode(this.refs.field.refs.age1).value;
        obj1.phone = ReactDOM.findDOMNode(this.refs.field.refs.phone1).value;
        var arr = [];
        arr.push(obj1)
        this.setState({
          obj: obj1,
          items: arr
        })
      }

      render() {
        return(
        <div>
        <Fields ref="field"  save={this.save.bind(this)}/>
        <Display items={this.state.obj} />
        </div>
      )
      }

    }

    class Fields extends React.Component {
      render() {
        return(
          <div>
            <label>Name</label>
            <input type="text" ref="name1"  /><br/>
            <label>Email</label>
            <input type="email" ref="email1"  /><br/>
            <label>Age</label>
            <input type="text" ref="age1"  /><br/>
            <label>Phone Number</label>
            <input type="text" ref="phone1"   /><br/>
            <button type="submit" onClick={ this.props.save }>Submit</button>
          </div>
        )
      }
    }

    class Display extends React.Component {
      render(){
        return (
          <div>
            <ul>
              <li><b>Name:</b> {this.props.items.name}</li>
              <li><b>Email:</b> {this.props.items.email}</li>
              <li><b>Age:</b> {this.props.items.age}</li>
              <li><b>Phone:</b> {this.props.items.phone}</li>
            </ul>
          </div>
        )
      }
    }

    export default Emp1;

Answer 1

当你写这个

    var arr = [];
    arr.push(obj1)
    this.setState({
      obj: obj1,
      items: arr
    })

您创建一个新的空数组，然后使用仅包含1个obj的新数组重置state.items

试试这个

    //var arr = [];
    //arr.push(obj1)
    this.setState({
      obj: obj1,
      items: [...this.state.items, obj1] // this will create new array from old with new item
    })

Answer 2

打印数组中的所有值..您需要迭代items数组.. 这是代码中缺少的东西..

put the below modification in the render block of 1st component(Emp1)

render() { let displayElems = this.state.items.map((d) => { return <Display items={d} />; }); return( <div> <Fields ref="field" save={this.save.bind(this)}/> {displayElems} </div> ) }

希望这会有效.. 我只是为了简单而修改了代码。

你应该做一些命名改变......例如<Display items={d} /> 这里不包括项目 - item应该使用： - ）

Answer 3

如果您想要显示已发送的所有表单的值，您可以尝试我所做的。

我更改了您的状态结构，“save”方法和“Emp1”类的render方法，以显示每个提交的表单。

class Emp1 extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
       items: []
    }
  }

  save(e) {
    e.preventDefault();
    var obj1 = {};
    obj1.name = ReactDOM.findDOMNode(this.refs.field.refs.name1).value;
    obj1.email = ReactDOM.findDOMNode(this.refs.field.refs.email1).value;
    obj1.age = ReactDOM.findDOMNode(this.refs.field.refs.age1).value;
    obj1.phone = ReactDOM.findDOMNode(this.refs.field.refs.phone1).value;
    var newArr = this.state.items.slice();
    newArr.push(obj1)
    this.setState({
      items: newArr
    })
  }

  render() {
    let displayItems = this.state.items.map((thisForm) => (
      <Display items={thisForm}/>
    ))
    return(
    <div>
      <Fields ref="field"  save={this.save.bind(this)}/>
      {displayItems}
    </div>
  )
  }

}

class Fields extends React.Component {
  render() {
    return(
      <div>
        <label>Name</label>
        <input type="text" ref="name1"  /><br/>
        <label>Email</label>
        <input type="email" ref="email1"  /><br/>
        <label>Age</label>
        <input type="text" ref="age1"  /><br/>
        <label>Phone Number</label>
        <input type="text" ref="phone1"   /><br/>
        <button type="submit" onClick={ this.props.save }>Submit</button>
      </div>
    )
  }
}

class Display extends React.Component {
  render(){
    return (
      <div>
        <ul>
          <li><b>Name:</b> {this.props.items.name}</li>
          <li><b>Email:</b> {this.props.items.email}</li>
          <li><b>Age:</b> {this.props.items.age}</li>
          <li><b>Phone:</b> {this.props.items.phone}</li>
        </ul>
      </div>
    )
  }
}