Question

我是新来做出反应并尝试使用动态输入字段来实现表单的新手，我无法映射基于列表形成的输入字段的属性列表，也无法更新该列表上的相关字段。我的表单数据如下所示。具有数据对象的属性结构键，因为数据对象可能包含更多字段，例如value。

form = {
    name : 'form'
    properties : [
      {
        name: 'property1',
        data: {
          value: 'property1'
        }
      },
      {
        name: 'property2',
        data: {
          value: 'property2'
        }
      }
    ]
  };

我的html如下所示

<input type="text" name="form" onChange={event => { this.handleChange(event, 'name');} } />



    <fieldset>
        <legend>Properties <button>Add Property</button> </legend>
            <fieldset>  
                <legend>Property <button>Remove Property</button> <legend>
                <input type="text" name="property1-key" />
                <input type="text" name="property1-value" />
            </fieldset>
            <fieldset>
                <legend>Property <button>Remove Property</button><legend>
                <input type="text" name="property2-key" />
                <input type="text" name="property2-value" />
            </fieldset>     
      </fieldset>

我能够处理父输入名称上的事件更改。但是我无法处理属性更改，以及如何将值映射到基于relevent键的位置。我正在按以下方式处理我的更改，但我需要对属性做同样的操作，但它不起作用。

 handleChange= (evt, field) => {
    var form= this.state.form;
    form[field] = evt.value;
    this.setState({
      form: form
    });

请让我知道如何根据上述输入来处理属性更改，如果需要更多信息，请告诉我。预先感谢

React-动态添加输入字段和基于输入列表的表单

0 个答案: