Select 具有动态选项

Question

我正在尝试创建一个动态的 select，其中包含处于某个状态的选项。

我试过两件事：

我尝试创建自定义 select 或使用无状态函数。我将具有可以用选项填充 select 的数据的道具传递给函数。像这样：

const renderFieldSelect = ({ name, label, templateList})  => {
 if(templateList && templateList.entities) {
  return (
   <div>
    <div className="col-md-4" >
     <label>{label}</label>
    </div>
    <div className="col-md-4">
     <Field
      className="form-control"
      name={name}
      component="select"
                    >
      {
       templateList.result.map((type, index) => 
        return <option value={templateList.entities.template[type].id}>{templateList.entities.template[type].name}</option>
       )
      }
     </Field>
    </div>
   </div>
  )
 }else {
  return <div></div>
}

//... more stuff

class Bla extends Component {
  
  //... more stuff
    render(){
        return (
            <div>
                <Field
                    component={renderFieldSelect}
                    name='templateList'
                    label='label'
                    templateList={this.props.templateList}
                />
                <Field
                    component="input"
                    name='addNewOption'
                    type='text'
                />
                <button onClick={addOption}>Add new option</button>
            </div>
        )
    }
}

但是当我更新 templateList（使用输入和按钮）时，对象不会重新呈现新的选项（我觉得这很奇怪）。我知道 addOption 函数正在运行，因为它通过了它的 reducer

我试图用 FieldArray 创建类似的东西，但我不知道如何更新 fields 参数。关于这个 prop has/could 有什么，文档不是很清楚。另外，我也不知道您是否可以创建一个 "Field" 和 return 或类似的东西。

Answer 1

根据您提供的信息，很难确定您的问题。

例如，您没有提供 reducer 或 addOption 函数。

无论如何，我确实编写了一个简单的示例来证明您的这部分代码应该有效。我不能代表 redux 部分，因为你没有提供，我今天不会编写代码。

也许这至少会为您提供一些证据表明问题出在代码的其他区域。

import React, {Component} from 'react'
import {Field, reduxForm, formValueSelector} from 'redux-form'
import {connect} from 'react-redux'

const renderFieldSelect = ({ name, label, templateList }) => {
  if (templateList && templateList.entities) {
    return (
      <div>
        <div className="col-md-4">
          <label>{label}</label>
        </div>
        <div className="col-md-4">
          <Field
            className="form-control"
            name={name}
            component="select">
            {
              templateList.result.map((type, index) => {
                return (<option value={templateList.entities.template[ type ].id}>{templateList.entities.template[ type ].name}</option>)
              })
            }
          </Field>
        </div>
      </div>
    )
  } else {
    return <div></div>
  }

}

class Bla extends Component {

  constructor(props) {
    super(props)
    this.state = {}
    this.state.templateList = {}
    this.state.templateList.result = ['type1', 'type2']
    this.state.templateList.entities = {}
    this.state.templateList.entities.template = {
      type1: {id: 1, name: 'Type 1'},
      type2: {id: 2, name: 'Type 2'}
    }
  }

  render () {
    return (
      <div>
        <Field
          component={renderFieldSelect}
          name='templateList'
          label='label'
          templateList={this.state.templateList}
        />
        <Field
          component="input"
          name='addNewOption'
          type='text'
        />
        <button onClick={this.addOption.bind(this)}>Add new option</button>
      </div>
    )
  }

  addOption() {
    let type = {id: this.props.addNewOption, name: this.props.addNewOption}
    this.setState({
      ...this.state,
      templateList: {
        result: [...this.state.templateList.result, type.id],
        entities: {...this.state.templateList.entities, template: {...this.state.templateList.entities.template, [type.id]: type}}
      }
    })
  }
}

let bla = reduxForm({
  form: Bla.name
})(Bla)

const selector = formValueSelector(Bla.name)

bla = connect(
  state => ({
    addNewOption: selector(state, 'addNewOption')
  })
)(bla)

export default bla

Select 具有动态选项

Select with dynamic options

reactjs

redux

redux-form