Question

我在React中动态创建，我希望能够提交所有输入字段的值，但我不能为每个输入元素添加单独的更改处理程序，因为它们是动态创建的：

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

Answer 1

由于它们是受控输入，因此没有反应方式，即使有我不推荐它，React也只是声明性代码。< / p>

有两种方法可以解决这个问题，一种方法是在 FormElement 上使用属性 onChange 并传递一个带有ids的函数，如下所示：

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

Answer 2

我实际上是以一种非常复杂的方式管理它，可能不是推荐的方式，但是它有效！我也从未在其他地方看到过这种情况......可能是有充分理由的：

表单元素：

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

正在发生的事情是在表单组件中更新了实际的完整表单数据，每次对表单元素之一进行更改时，它都会将其传递回父表单，更新＆＃39;形式的状态，然后重新呈现整个形式。

这里的复杂功能实际上是在整个表单状态中找到正确的表单元素，方法是在数组中搜索键，然后更新值。

虽然我认为这适用于小型表单，但我可以看到它将如何开始显着减慢大型表单应用程序的渲染速度。

如何在React.js中提交动态表单

2 个答案: