如何在React.js中提交動態表單

我在React中有一個動態創建的，我希望能夠提交所有輸入字段的值，但我無法在更改處理程序上添加單獨的對於每個輸入elment，因爲它們被動態創建的：如何在React.js中提交動態表單

提取物的形式JS：

const FormElements = ({formFields}) => (<div> { 
    formFields.map(formField => (<FormElement name={formField.name} type={formField.fieldType} />) 
    )} </div>); 
console.log(formFields); 

return (
    <div class="col-md-12"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      {title} - {id} 
     </h4> 
     </div> 
     <div class="panel-body"> 
     <form > 
      <FormElements formFields={formFields} /> 
     <a 
      class="btn btn-primary" 
      onClick={this.handleSubmitButton}//what do I do with this function? 
      href="#">Submit</a> 
        </form> 
     </div> 
    </div> 
    </div> 
);

形式元件JS：

export default class FormElement extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <div class="form-group"> 
     <label for="{this.props.name}">{this.props.name}</label> 
     <input type="{this.props.type}}" class="form-control" id="{this.props.name}" placeholder="blah blah" /> 
     </div> 
    ); 
    } 
}

來源

2017-02-02 Wayneio

我實際上是在一個相當複雜的，可能不是推薦的方式來管理它，但它的工作原理！我也從來沒有見過這樣做過的......或許有很好的理由：

表單元素：

export default class FormElement extends React.Component { 

    constructor(props) { 
    super(props); 
    this.onChange = this.onChange.bind(this); 
    } 

    onChange(e) { 
    this.props.handleChange(e.target.id, e.target.value); 
    } 

    render() { 
    return (
     <div class="form-group"> 
     <label for={this.props.id}>{this.props.name}</label> 
     <input type="{this.props.type}}" class="form-control" id={this.props.id} value={this.props.value} placeholder="blah blah" onChange={this.onChange}/> 
     </div> 
    ); 
    } 
}

形式：

handleFormElementChange(id, value) { 
    console.log("changing: " + id + " = "+ value); 

    var frm = this.state.formData; 
    var index=-1; 
    for(var i=0;i<frm.length;i++) { 
     if(frm[i].id==id) { 
     index=i; 
     break; 
     } 
    } 
    frm[index].value = value; 
    this.setState({formData: frm}); 
    } 


const FormElements = ({formFields}) => (<div> { 
     formFields.map(formField => (<FormElement name={formField.name} key={formField.id} value={formField.value} id={formField.id} type={formField.fieldType} handleChange={this.handleFormElementChange.bind(this)}/>) 
    )} </div>);

發生了什麼是真正的全格式數據正在在表單組件中進行更新，並且每次對其中一個表單元素進行更改時，都會將其傳遞迴父表單，更新表單的狀態，然後重新呈現整個表單。

這裏的複雜性實際上是通過在數組中搜索關鍵字並更新值，在總體表單狀態中找到正確的表單元素。

雖然我看到這個工作與小型窗體，我可以看到它將如何開始顯着減慢渲染大型窗體應用程序。

來源

2017-02-02 17:01:43 Wayneio

這種方法的唯一問題是，當頁面與數據重新加載時，它會取消選擇您輸入的框。 – Wayneio

由於它們是控制INP嗯沒有一個反應方式，即使有我不會推薦它，React是關於聲明代碼。

有兩種方法來解決這個問題，一個是使用使屬性的onChange您FormElement和傳遞函數的ID，這樣的事情：

<FormElements onChange={(key, value) => this.setState({ [key]: value })

的另一種方式是送給所有未定義道具到輸入：

export default class FormElement extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    const { name, type, ...other } = this.props 
    return (
     <div class="form-group"> 
     <label for="{name}">{name}</label> 
     <input type="{type}}" class="form-control" {...other} id="{this.props.name}" placeholder="blah blah" /> 
     </div> 
    ); 
    } 
}

（所述{ [key]: value }和{...other}是ES6）

來源

2017-02-02 14:16:55 donnanicolas

如何在React.js中提交動態表單

回答

相關問題