表格提交使用反应而没有状态 [英] Form submission using react without having state

问题描述

我有这个简单的场景。用户单击编辑按钮，他将转到每个字段都填写有表单的页面。他改变了一些东西并点击保存，非常简单。在jquery中我们只是绑定并从DOM中获取值，在angularjs中，2路绑定的工作方式相同，但是反应如何？

I have this simple scenario. User click on an edit button, he go to a page with form filled on every fields. He change something and click save, very simple. In jquery we just bind and get the values from the DOM, in angularjs 2 way binding works the same, but how about in react?

我经常看到人们得到表单通过将输入绑定到onChange来获取值，但在编辑情况下，用户可能不会触及每个字段。我认为不需要国家。我需要绑定我的数据

I often seeing people get the form value by binding the input to onChange, but in the edit case, the user might not touch every fields. I don't think state is needed. I need to bind my data

var item = {
    "name":"James",
    "dates": {
    "contract": [
          {"id":1,"name":"1 month","value":false},
          {"id":2,"name":"2 months","value":true}
        ]
    }}

https://jsfiddle.net/p1pztpcw/

我还有一个问题。我收到了警告在< select>上使用'defaultValue'或'value'道具而不是在< option>上设置'selected'。

I have one more problem. I got warning of Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>.

推荐答案

对于你的问题< select> ， React能够在< select> 上读取道具值 。因此，在选项上使用选择，不推荐使用React。

For you problem with <select>, React is able to read the props value on <select>. As a result, using selected on option with React is deprecated.

关于创建状态的问题，您可以在提交表单时读取每个输入值。可以使用 React ref propertie 。但是你必须绑定每个输入：

For your problem about creating a state or not, you can avoid it by, when submitting the form, reading each of the inputs value. Each input can be accessed using React ref propertie. But you'll have to bind each of the inputs:

<input type="text" ref={(input) => { this.textInput = input; }} />

这篇关于表格提交使用反应而没有状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！