Question

我在使用 FieldArray 时遇到一些概念问题，我有多个Select组件连接到 FieldArray ，每个选择组件应更新值 onChange 并应删除它通过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组件

1 个答案: