反应形式，提交对象，然后将其推送到数组 [英] React form, to submit object which is then pushed to array

问题描述

我是React的新手，不确定如何做到这一点.

I'm new to React and unsure about how to do this.

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

I have an array of objects that I have mapped through and rendered in my view. What I want to do is set up a form that will submit the values of each field to the corresponding properties of a new object, but I'm not sure how to go about doing this.

这是我的初始数据，该数据在视图中呈现:

contactArray = [
  {
    name: 'John'
    email: '[e-mail]'
    number: 111-111-111
  },
  {
    name: 'Dave'
    email: '[e-mail]'
    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: // ????
  })
}

然后我想清除提交表单以及用于推送新对象的对象，该对象现在位于数组中(我希望这是有道理的...)

And then I want to clear the submit form, as well as the object that is used to push the new object, which is now in the array (I hope that makes sense...)

因此，我什至不知道在这种情况下如何使用状态，但最终我想将新对象 push()呈现到呈现的数组中，同时保留所有属性.以表格形式填写.

So, I'm not even sure how to use state in this scenario, but ultimately I want to push() the new object to the array that is rendered, with all the properties as they were completed in the form.

抱歉，到目前为止我还无法完全完成工作，但至少会感谢一些有关此方面的建议！

Sorry I can't be more complete with my working up to this point, but would at least appreciate some pointers on this!

推荐答案

您无需为所有输入设置 state .如果这样做，当您有更多的 input 字段时，将是一个问题.参见下面的小提琴，在那儿，我使用了一个 state 来存储整个联系人.当您按下提交按钮时，它将从 input 获取所有值并将其保存到 state .希望对您有帮助！

You don't need to set state for all the inputs. If you do, it'll be a problem when you have more input fields. See the below fiddle, in that, I've used a single state to store the entire contacts. When you press the submit button, it get all the values from the input and save it to the state. Hope it helps!

提琴: http://jsfiddle.net/Pranesh456/8u4uz5xj/1/

[UPDATE]

1. e.value = null 将清除表单中的值.这样，您就可以重置整个表单.
2. slice()用于在状态下复制数组.由于数组的分配是对原始数组的引用，因此对新数组的任何操作也将反映在原始数组中.

1. e.value = null will clear the value inside the form. By this, you'll able to reset the entire form.
2. slice() is used to make a copy of the array in the state. As assignment of array is a reference to the original array, any operation on the new array will also reflect in the original array.

示例:

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]

但是

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

有关切片的更多详细信息

这样做，您将不会更改现有状态，这是一个好习惯.

By doing this, you'll not mutate the existing state, which is a good practice.

希望对您有帮助！

这篇关于反应形式，提交对象，然后将其推送到数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！