javascript - React 中的动态表单与 Redux-Form

Question

我正在开发一个足球投注系统。我想动态制作一个表单，并使用 redux-forms 将对象保持在状态中。

我的基本实体是一场比赛:谁拥有主场球队、客场球队以及带有主场结果和客场结果的输入。

 matches = [
{
  name: 1,
  type: "group",
  home_team: 1,
  away_team: 2,
  home_result: null,
  away_result: null,
  date: "2018-06-14T18:00:00+03:00",
  stadium: 1,
  channels: [],
  finished: false
},
{
  name: 2,
  type: "group",
  home_team: 3,
  away_team: 4,
  home_result: null,
  away_result: null,
  date: "2018-06-15T17:00:00+05:00",
  stadium: 12,
  channels: [],
  finished: false
},

我想将其填写在 Redux-Form 中，但陷入了最佳制作方式中。我也希望，每次用户更改输入上的值时，这都会反射(reflect)在 State-Json 中。

Answer 1

要动态创建表单，您需要以不同的方式构建数据。您需要如下所示的字段对象(带有匹配 ID):

const fieldsObject = ['match1', 'match2', 'match3']

还有一个初始值对象，如下所示:

const resultsObject = {
  match1_home: 1, 
  match1_away: 3
}

等等。然后，表单将根据初始值和字段名称初始化其字段。代码:

const MyForm = (props) => {
 const { handleSubmit, fields } = props;
return (
    <form onSubmit={handleSubmit}>
      {fields.map(match => (
        <div key={match}>
          <Field
            name={`${match}_home`}
            component="input"
            />
           <Field
            name={`${match}_away`}
            component="input"
            />
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  )
}

用法如下:

<MyForm initialValues={resultsObject} fields={fieldsObject} onSubmit={this.submitForm}/>