Как отправить динамическую форму в React.js

Question

У меня есть динамически созданный из React, и я хотел бы иметь возможность отправлять значения всех полей ввода, но я не могу добавить отдельные в обработчики изменений для каждого входного elment, так как они создаются динамически:

экстракта из формы 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> 
); 

элементов формы ЯШИ:

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> 
    ); 
    } 
} 

Answer 1

Я действительно справился с этим довольно запутанным и, вероятно, не рекомендованным способом, но он работает! Я также никогда не видел это сделано в других местах ... вероятно, по уважительной причине:

Форма элемента:

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>); 

Что происходит фактическая полная форма данных является обновляется в компоненте формы, и каждый раз, когда изменяется один из элементов формы, он передает его обратно в родительскую форму, обновляет форму формы, а затем повторно отображает всю форму.

Усложнение здесь фактически находило правильный элемент формы в общем состоянии формы, путем поиска по массиву для ключа и обновления значения.

Хотя я вижу, что это работает с небольшими формами, я вижу, как он начнет значительно замедлять рендеринг в приложениях большой формы.

Answer 2

поскольку они контролируются ве uts нет ответ путь к этому, и даже если есть, я бы не рекомендовал его, React - все о декларативном коде.

Есть два способа решить эту проблему, один является использование сделать свойство OnChange на вашем FormElement и передать функцию с идентификаторами, что-то вроде этого:

<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)