Javascript React表单，提交对象，然后将其推送到数组中

我是个新手，不知道该怎么做

我有一个对象数组，这些对象已映射并在视图中渲染。我想做的是设置一个表单，将每个字段的值提交给一个新对象的相应属性，但我不确定如何执行此操作

这是我在视图中呈现的初始数据：

contactArray = [
  {
    name: 'John'
    email: 'john@email.com'
    number: 111-111-111
  },
  {
    name: 'Dave'
    email: 'dave@email.com'
    phone: '222-222-222'
  }
]

class InputForm extends Component {
  render() {
    return (   
        <form>
          <input type='text' onChange={this.handleChange}/>
          <input type='text' onChange={this.handleChange}/>
          <input type='text' onChange={this.handleChange}/>
          <button type='submit' onSubmit={this.handleSubmit}>SUBMIT</button>
        </form>
    ) 
  }

constructor(props) {
  super(props);
  this.state = {
    name: '',
    email: '',
    phone: ''
  }
}

然后我有一个表单：

contactArray = [
  {
    name: 'John'
    email: 'john@email.com'
    number: 111-111-111
  },
  {
    name: 'Dave'
    email: 'dave@email.com'
    phone: '222-222-222'
  }
]

class InputForm extends Component {
  render() {
    return (   
        <form>
          <input type='text' onChange={this.handleChange}/>
          <input type='text' onChange={this.handleChange}/>
          <input type='text' onChange={this.handleChange}/>
          <button type='submit' onSubmit={this.handleSubmit}>SUBMIT</button>
        </form>
    ) 
  }

constructor(props) {
  super(props);
  this.state = {
    name: '',
    email: '',
    phone: ''
  }
}

那么提交功能我真的不知道如何处理…

handleSubmit() {
  // not sure about this...
  this.setState({
    name: // ????
    email: // ????
    phone: // ????
  })
}

然后我想清除提交表单，以及用于推送新对象的对象，它现在在数组中（我希望这是有意义的…）

因此，我甚至不知道在这个场景中如何使用state，但最终我想

push（）

将新对象推送到呈现的数组中，并在表单中完成所有属性

---

很抱歉，到目前为止，我的工作还没有完成，但我希望至少能得到一些关于这方面的建议

您不需要为所有

输入设置
状态
。如果您这样做，当您有更多的
输入
字段时，这将是一个问题。请看下面的提琴，在这里，我使用了一个
状态
来存储整个联系人。当您按下提交按钮时，它将从
输入中获取所有值
，并将其保存到
状态
。希望有帮助

小提琴：

[更新]

e.value=null
将清除表单中的值。这样，您就可以重置整个表单
slice（）
用于制作处于状态的数组的副本。由于数组的赋值是对原始数组的
引用
，因此对新数组的任何操作也将反映在原始数组中
例如：

a = [1,2,4]
b = a
b.push(7)
console.log(b) //prints [1,2,4,7]
console.log(a) //also prints [1,2,4,7]

但是

更多关于

通过这样做，您不会改变现有状态，这是一个很好的实践

希望能有帮助
 据我所知，您想把新的联系人推到现有的
联系人阵列
？我将分享我的做法。看看：

const contactArray = [
{
    name: 'John',
    email: 'john@email.com',
    phone: '111-111-111'
  },
  {
    name: 'Dave',
    email: 'dave@email.com',
    phone: '222-222-222'
  }
];

class Form extends React.Component {

  constructor() {
    super();
    this.state = {
      contacts: contactArray
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    const
    { contacts } = this.state,
    name = this.refs.name.value,
    email = this.refs.email.value,
    phone = this.refs.phone.value;
    this.setState({
      contacts: [...contacts, {
        name,
        email,
        phone
      }]
    }, () => {
      this.refs.name.value = '';
      this.refs.email.value = '';
      this.refs.phone.value = '';
    });
  }

  render() {
    const { contacts } = this.state;
    console.log('message',this.state.contacts);
    return (   
      <div>
        <h2>Add Someone</h2>
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref="name" placeholder="name" />
          <input type="text" ref="email" placeholder="email" />
          <input type="text" ref="phone" placeholder="phone" />
          <button type="submit">Submit</button>
        </form>
        <h2>Exsiting contacts:</h2>
        <ul>
          {contacts.map((contact) => 
           <li>{`Name: ${contact.name} Email: ${contact.email} Phone: ${contact.phone}`}</li>
          )}
        </ul>
      </div>
    ) 
  }
}

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

现场演示：

我强烈建议使用第一个示例。因为它的性能会更好：）
谢谢。虽然JSFIDLE或多或少是我在OP中加入的东西。。。你发错链接了吗？@Paulos3000嘿！很抱歉更新了链接。非常有用-谢谢。请看一看我的更新，在您的代码中有几件事我不确定…请注意-提交后清除表单元素的另一种方法是在提交时对表单元素调用
.reset（）
。我刚刚发现这一点，并认为它可能对任何面临这种情况的人都有用…@Paulos3000这很有帮助！谢谢谢谢我已经读到你应该尽可能避免使用参考文献-我从未使用过它们，所以我不确定它们的局限性。。。你能澄清一下吗？@Paulos3000为什么不使用参考文献？我还添加了另一个没有参考值的形式求和的示例。我不知道确切的原因，我在这里读到了--我只是想更好地理解它们什么时候合适，而不是依赖它们，然后再发现它们的缺点。codepen Breaked你还有其他例子吗请在你的问题中添加
update
部分，作为对Pranesh答案的评论。对答案的答复不应张贴在问题本身上，而应张贴/讨论在相应答案的评论部分。