React - 访问数据对象或将数据对象直接分配给 FieldArray 的 Field 组件

Question

我在使用 FieldArray 时遇到一些概念问题，我有多个 Select 组件连接到 FieldArray，每个 select 组件应更新值 onChange 并应将其删除 through api。为了能够执行 api 请求，我需要访问字段的其他详细信息，例如 id。我已经设置了我的组件，如下所示，它在没有 api 调用的情况下工作正常..

renderAdditionalSpeakers({fields}){
    return (<div>
      {
        fields.map((speaker,index)=>
          <Field
            name={`${speaker}.speakerid`}
            label="Choose Speaker"
            type="select"
            component={this.renderSelectWithDelete}
            mandatory='false'
            placeholder='Select Speaker'
            opts={this.props.speakers}
            key={`KEY-${index}`}
            deleteaction={() => fields.remove(index)}
            onChange={this.onSpeakerChange.bind(this)}
        />
      )
    }
    <div className="form-group row">
      <div className="col-sm-3">&nbsp;</div>
      <div className="col-sm-9 col-sm-offset-0">
        <Button className="button-theme button-theme-blue" type="button" onClick={() => fields.push({})}>Link More Speaker</Button>
      </div>
    </div>
    </div>);
  }

渲染方法如下所示

render() {

    var {handleSubmit, invalid, pristine, submitting,speakers,tracks} = this.props;

    return(
      <div>
        <form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>
          <FieldArray name="additionalspeakers" component={this.renderAdditionalSpeakers.bind(this)}/>
        </form>
      </div>
    );
}

根据上面的代码，我需要在 ondeleteaction 回调和 onChange 操作中调用 api。这只有在我可以访问由以下值组成的 json 对象时才有可能

{
   "id":"1",
   "speakerid":"23",
   "sessionid":"102",
   "eventid":"200"
}

如何实现？

感谢您的帮助。

Answer 1

您可以将更多参数传递给您的字段数组并在您的渲染方法中使用它们，例如

<FieldArray name="additionalspeakers" component={this.renderAdditionalSpeakers.bind(this)} props={{ onDeleteAction: this.ondeleteaction, onChange: this.onChange }} />

（其中 this.ondeleteaction 和 this.onChange 是您组件中定义的回调函数）。

然后您可以将 FieldArray 声明为：

renderAdditionalSpeakers({fields, onDeleteAction, onChange}) {

并在组件内使用函数回调。

React - 访问数据对象或将数据对象直接分配给 FieldArray 的 Field 组件

React - Access or assign data object directly to Field component for FieldArray

javascript

reactjs

redux-form